CSS Tricks: Horizontal Lines Before and After Texts (Quick Tutorial)

This Video is going to show you CSS Tricks: Horizontal Lines Before and After Texts (Quick Tutorial) Horizontal Line After Text CSS
What about double lines on the sides and line bar on the bottom? Watch this video and learn more techniques: • CSS Heading Text with ...
Get the code:
22bulbjungle.co...
Subscribe to Garnatti one: bit.ly/2FiBlPO
Visit our website: 22bulbjungle.com
Like us on Facebook: / 22bulbjunglerocks
Follow us:
Instagram: / 22bulbjunglerocks
Twitter: / 22bulbjungle

[@garnattione]

Show some love :) ✌
22bulbjungle.com/supportme

[@akazad3678]

you are really genius

[@꽁꽁-d4v]

THX!!!!! Teacher I did it !!!!
I have some question !!!
If i want to make double line, what tags should i add more??

[@garnattione]

This is what you're looking for: ua-cam.com/video/nAqW6-JJGmw/v-deo.html

[@zwehtet-z1d]

when i change div background color this horizonal line was not found

[@garnattione]

You can try stacking it above other elements using the z-index property. 🙂

[@topfilo6493]

thank you sir this video helped me alot and saved my time

[@kishorisahoo6088]

Thank you sir ☺️

[@madhuris8688]

span is very important here to see z-index working

[@RyanRusin]

Thank you so much for clarifying this, your comment saved me a bunch of trouble!

[@garnattione]

Although you can use a single colon for psuedo elements, it's recommended to use double colon to distinguish it from psuedo classes.

[@clementgomez9265]

WHATS THE NAME OF THE SONG PLS :)

[@garnattione]

I don't remember but it's all from UA-cam 🙂

[@MuhammadUsman-ri1hm]

I did exactly the same thing but the line moves way up the page don't know why. Can you please explain why is this happening?

[@garnattione]

Make the parent relative positioned. See the video.

[@nandayelgar2818]

i want horizontal lines to disappear on hover . how to do this?

[@gormintaunty7709]

What to do if we want to insert image

[@jaydee-222]

Why not just use the ::before and set the width to 100%?

[@alenignjatovic6257]

I wonder if you could tell me why my code isn't working,
Html:

Welcome

Css:
*{
padding: 0%;
margin: 0%;

}
h1{
position: relative;
text-align: center;
padding: 200px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
h1::before{
content: none;
width: 200px;
background-color:black ;
position: absolute;
left: 0px;
top: 50%;
height: 20px;
display: block;
} h1::after{
content: none;
width: 200px;
background-color:black ;
position: absolute;
right: 0px;
top: 50%;
height: 20px;
display: block;
}

[@nandanjha6959]

content:''; and give a width:600px to h1 your code will work Hope it will help thank you

[@yamaan6235]

how to close the distance between them

[@davidobrien3669]

put it in a div and define the width there

[@mauamadoudrammeh7868]

hello i dont know the reason why when i use z-index: -2, the line disappear from it

[@garnattione]

It's used to order the layer of elements.
The higher the value than any other elements the more priority for it to be on the top of any other elements.

[@bahtguy5639]

really helpful tutorial

[@sofifr]

What ends every line of CSS?

[@sayedaliaqamousavi9064]

Awesome, sir.

[@jv18creator]

Thank you

[@talha_2012Odyssey]

Thanks

[@vynvoyage]

ty fyi

[@shonhomezzz6222]

do u have any vids on how to make this responsive?

[@garnattione]

Try this ua-cam.com/video/mjDek0d1kak/v-deo.html

[@peterlammersma2109]

perfect solution! Thanks!

[@garnattione]

What about double lines on the sides and line bar on the bottom? Click on the following link to watch the video: ua-cam.com/video/nAqW6-JJGmw/v-deo.html

[@dipopurwa2468]

how to make line long same from div.class=col-md ?

[@azizaanwari3930]

what if the backgound is an image and not white color?

[@garnattione]

Then you have to add both before and after for the left and right side lines. See more: ua-cam.com/video/nAqW6-JJGmw/v-deo.html

[@HardDharajiya]

Sir what is main use of Z-index???

[@garnattione]

Use to order the layer of elements.

[@jennyortega6525]

how can I do this in a word document?

[@BlissAden]

😆

[@laMarvilla4]

Gracias tu video me ayudo mucho :D

[@garnattione]

De nada

[@lanielopez3928]

what app is this?

[@MuhammadIMRAN-ho6rj]

its a software :BRACKET