::before / ::after in css

#css #html #webdev

Insert some text/image etc before of after and after an element without adding html elments

Use case

Sometimes we need to style element like above in such case we can use before and after like below

html

<p>This is paragraph</p>

css

p {
    display: flex;
    align-items: center;
  }

  p::before {
    content: "";
    margin-right: 10px;
    flex: 1;
    border-bottom: 1px solid #ccc;
  }

  p::after {
    margin-left: 10px;
    content: "";
    flex: 1;
    border-bottom: 1px solid #ccc;
  }

Thanks for reading this if you have any other suggestions to do this better please comment below

For react beginner you can follow me on youtube ( If you want )

React/Javascript Videos (IN Hindi) :