<div class="example"></div>.example {
width: 300px;
height: 50px;
margin: 50px auto;
background: yellow;
cursor: pointer;
position: relative;
}
.example:before {
content: '';
display: block;
width: 0;
height: 5px;
background: red;
position: absolute;
left: 50%;
bottom: 0;
transition: .5s;
}
.example:hover:before {
width: 100%;
left: 0;
}<body>
<div class="container">
...
</div>
</body>.container {
margin: 0 auto;
width: XXXpx;
}<div class="example"></div>.example {
width: 300px;
height: 50px;
background: yellow;
cursor: pointer;
position: relative;
margin: 50px auto;
}
.example:before {
content: '';
display: block;
width: 0;
height: 5px;
background: red;
position: absolute;
left: 0;
bottom: 0;
transition: .5s;
}
.example:hover:before {
width: 100%;
}<div class="block">
<a href="#" class="more">
read more
</a>
</div>.block{
width: 200px;
height: 200px;
background: #bebebe;
position: relative;
}
.more{
position: absolute;
right: 10px;
bottom: 10px;
}@font-face {
font-family: 'Play';
src: url('../fonts/play-regular-webfont.eot');
src: url('../fonts/play-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/play-regular-webfont.woff2') format('woff2'),
url('../fonts/play-regular-webfont.woff') format('woff'),
url('../fonts/play-regular-webfont.ttf') format('truetype'),
url('../fonts/play-regular-webfont.svg#playregular') format('svg');
font-weight: normal;
font-style: normal;
}var connect = require('browser-sync'); // livereload
var sass = require('gulp-sass'); // Кому что, я использую SCSS
var csscomb = require('gulp-csscomb'); // Обязательно!
var cssmin = require('gulp-cssmin');
var imageop = require('gulp-image-optimization'); // Лучшая альтернатива gulp-imagemin
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var plumber = require('gulp-plumber'); // Не позволяет плагину умереть молча
var autoprefixer = require('gulp-autoprefixer');
var ngrok = require('ngrok'); // Пробрасываем локальному серверу путь наружу для для заказчика
var spritesmith = require('gulp.spritesmith'); // Спрайты
var notify = require('gulp-notify'); // Уведомления
var merge = require('merge-stream'); // Деление таска на разные потоки