Horizontal Lines Before and After Texts (CSS Tutorial)

This Video is going to show you CSS Tricks: Horizontal Lines Before and After Texts (Quick Tutorial) Horizontal Line After Text

Code

  1. <h1><span>We are Awesome</span></h1>
  1. h1{
  2. font-family: sans-serif;
  3. margin: 100px auto;
  4. text-align: center;
  5. font-size: 40px;
  6. max-width: 600px;
  7. position:relative;
  8.  
  9. }
  10. h1:before{
  11. content: "";
  12. display:block;
  13. width: 120px;
  14. height:2px;
  15. background: #000;
  16. position: absolute;
  17. left: 0;
  18. top: 50%;
  19. z-index: -2;
  20. }
  21. h1:after{
  22. content: "";
  23. display:block;
  24. width: 120px;
  25. height:2px;
  26. background: #000;
  27. position: absolute;
  28. right: 0;
  29. top: 50%;
  30. z-index: -2;
  31. }
  32. span{
  33. background: #fff
  34. }

Leave a Reply

avatar
  Subscribe  
Notify of