Как прописать такую черточку через css для заголовка h1?

Yurecm
На сайте с 25.02.2007
Offline
233
723

border на всю длину заголовка я сделаю легко, а вот как прописывая стиль для заголовка h1 сделать ее фиксированной ширины, как на картинке?

Заранее спасибо, плюсом :)

Staid
На сайте с 30.07.2014
Offline
59
#1

Можно изображение фоном задать.

Yurecm
На сайте с 25.02.2007
Offline
233
#2

Staid, спасибо! +++++1

а о слоне то я не подумал)))))) а через css можно сделать?

werty1001
На сайте с 30.03.2008
Offline
82
#3


<h1>Наши преимущества</h1>

h1 {
position: relative;
text-transform: uppercase;
padding: 10px 0 0 0;
}

h1:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 3px;
background: #DC5440;
}

Держите.

Магазин аккаунтов с балансом Litres,DNS,Ozon,Rotapost и еще 50+ других сервисов тут - vk.cc/7QK0Sk
TA
На сайте с 12.06.2009
Offline
116
TiA
#4
Yurecm:
border на всю длину заголовка я сделаю легко, а вот как прописывая стиль для заголовка h1 сделать ее фиксированной ширины, как на картинке?



Заранее спасибо, плюсом :)

Если полоска требуется фиксированной ширины, то можно сделать так:


h1 {
display: block;
position: relative;
}

h1:after {
content: '';
display: block;
width: 100px; /* ширина полоски */
height: 4px; /* толщина полоски */
background-color: #900; /* цвет полоски */
position: absolute;
top: -4px; /* вертикальное смещение */
left: 0; /* горизонтальное смещение */
}
Профессиональная верстка и разработка сайтов на WordPress (http://www.maultalk.com/topic139110s0.html)
Yurecm
На сайте с 25.02.2007
Offline
233
#5

werty1001, TiA, спасибо!

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий