CSS Adding text to border

[Edrol97]

Hey there, you have to include the border style. So something like this should work:

element {
  border-top: solid black 10px;
}

Hi John,

Thanks for this. My plans have developed somewhat and now, I'm wondering how I would add a text element to the border top. Is there anyway to do this?

E

 

[Johna]

You can't actually add text to a border, but you could use the ::before psuedo-class to simulate a border and add text. Something like this would create a top border 10px thick (assuming the parent element is a block element):

element::before {
  content: "some text";
  display: block;
  width: 100%;
  height: 10px;
  background: black;
  color: white;
  line-height: 0;
}

 

[tomliv]

If the text doesn't need to be changed, you could use border image, putting the text in the image. I've not used border image a lot, if at all, and seems a bit finicky.

border-image CSS property - CSS | MDN

The border-image CSS shorthand property draws an image around a given element. It replaces the element's regular border.

developer.mozilla.org

@Johna's above suggestion is more flexible.