Border line next to text

Question

I have a p tag. I want a border line next to it.

 Categories         


        

Answer 1

There are many other ways to achieve this, one of them would be applying a border-bottom to a pseudo-element (which establishes a new block formatting context in order to prevent overlapping) and floating the element to the left:

p.hasBorder {
  overflow: hidden; /* Establish a new block formatting context */
}

p.hasBorder > strong {
  float: left;
}

p.hasBorder:after {
  content: "";
  display: block;
  border-bottom: 3px solid silver;
  overflow: hidden;  /* Establish a new block formatting context */
  height: 1em;       /* Up to you */
}

  Categories