muszę dodać stylową ramkę w tekście nagłówka tak:Jak dodać obramowanie częściowe do tytułu nagłówka?
ale nie jestem pewien, jak to zrobić.
Próbowałem poniższy kod z border-bottom, ale nie wygląda dobrze.
h1 {
font-size:30px;
color:#000;
border-bottom: 1px solid #ccc;
padding-bottom:5px;
}<h1>Navigation</h1>Można użyć element pseudo umieszczony nad border-bottom:
h1 {
font-size: 30px;
color: #000;
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
}
h1::after {
content: "";
display: block;
border-bottom: 1px solid orange;
width: 25%;
position: relative;
bottom: -6px; /* your padding + border-width */
}<h1>Navigation</h1>Korzystanie element pseudo jak to sprawia, że bardzo łatwo dodać animację . Może animowanie granicy po najechaniu na części strony:
h1 {
font-size: 30px;
color: #000;
border-bottom: 2px solid #ccc;
padding-bottom: 5px;
}
h1::after {
content: "";
display: block;
border-bottom: 2px solid orange;
width: 0;
position: relative;
bottom: -7px; /* your padding + border-width */
transition: width .6s ease;
}
.section:hover h1::after {
width: 25%;
}<div class="section">
<h1>Navigation</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet accumsan odio, sit amet molestie tortor ultricies vel. Donec nibh purus, fermentum eget dolor ac, tincidunt scelerisque urna. Ut gravida id eros sed placerat. Etiam vel mi erat. Etiam rhoncus massa ultricies quam malesuada pretium. Fusce elementum diam in turpis rutrum auctor. Vestibulum venenatis bibendum euismod. Praesent ex justo, blandit non urna et, porta interdum enim.
</p>
</div>Z pseudoelementu i liniowym gradientem
h1 {
font-size: 30px;
color: #000;
position: relative;
}
h1::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 2px;
bottom: 0;
margin-bottom: -.5em;
background: linear-gradient(to right, gold 15%, grey 15%, grey);
}<h1>Navigation</h1>Spróbuj użyć :after pseudo selektora
h1 {
font-size:30px;
color:#000;
border-bottom: 1px solid #ccc;
padding-bottom:5px;
position: relative;
}
h1:after {
content:"";
position: absolute;
width: 100px;
height: 1px;
background: red;
left: 0;
bottom: -1px;
}<h1>Navigation</h1>Jednym ze sposobów takiego postępowania byłoby dodać h1::after z wymaganą szerokość - i ma inny kolor obramowania.
h1 {
font-size: 30px;
color: #000;
border-bottom: 1px solid #FFEB3B;
padding-bottom: 5px;
POSITION: relative;
}
h1:after {
display: block;
border-bottom: 1px solid red;
content: "";
position: absolute;
bottom: -1px;
left: 0px;
width: 5em;
}<h1>Navigation</h1>Jeden sposób można badać używa pseudo-elements.
h1 {
font-size: 30px;
color: #000;
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
position: relative;
}
h1:after {
content: "";
width: 100px;
height: 1px;
background: orange;
position: absolute;
bottom: -1px;
left: 0;
}<h1>Navigation</h1>użycie Marka :after jak :before elementy pseudo aby uzyskać dokładny wynik. Ustaw je w pozycji absolute. Sprawdź poniższy fragment w celach informacyjnych.
h1 {
font-size: 30px;
color: #000;
padding-bottom: 10px;
position: relative;
display: inline-block;
}
h1:before {
content: "";
width: 100%;
height: 3px;
background: #ccc;
position: absolute;
bottom: 0;
}
h1:after {
content: "";
width: 50%;
height: 3px;
background: red;
display: block;
position: absolute;
bottom: 0;
}<h1>Navigation</h1>Musisz użyć selektora pseudo :before dodać tę granicę, h1 jest block element więc nawet trzeba dodać width dostosować długość tej granicy, albo będzie to 100% szerokość h1.
h1{
font-size:30px;
color:#000;
border-bottom: 1px solid #ccc;
padding-bottom:5px;
position:relative;
}
h1:before{
content:"";
bottom:-1px;
left:0;
border-bottom:1px solid brown;
position:absolute;
z-index:9;
width:50%;
}<h1>Navigation</h1>Można użyć gradientu tła i rozmiarze
h1 {
font-size:30px;
color:#000;
background:linear-gradient(to right, gold 8em, #ccc 8em) bottom left no-repeat;/* here start/stop color is et at 8em, use your own value and colors */
background-size:100% 3px;/* here set thickness */
padding-bottom:5px;
}<h1>Navigation</h1>wziąłem go trochę dalej i uczynił wygląd nagłówka bardziej podobny do obrazu referencyjnego. Używam tego samego pomysłu na tło, co G-Cyr w swoim answer.
Zwróć uwagę na dwa tła. Pierwszy zestaw wartości w atrybutach background i background-size jest tym, co stanowi podstawę; drugi zestaw dotyczy koloru tła.
h1 {
background: linear-gradient(to right, #E6831D 20%, #FFF 20%) bottom .5em left .8em no-repeat, linear-gradient(#323A45, #323A45);
background-size: 100% 1px, 100% 100%;
padding: .8em;
color: #FDFFFE;
font-size: 30px;
font-family: sans-serif;
font-weight: lighter;
}<h1>Awesome Heading</h1>