tofu tofu - 1 month ago 11
CSS Question

Break border with text css

I want to ask the same question that is asked here, but there are no answers. Does anyone have an answer for this question? I want something that looks like this: example

The problem is that I have a background picture and I need the picture to be visible through the a-element but not the border.

<div class="info">
<a href="#">Some text</a>
</div>

Answer

You can use a pseudo element with a border-bottom(or top or a background).

Give it some layout and a width to 100%.

Reduce its width virtually to 0 with a negative margin.

You may set overflow:hidden to its container if needed.

DEMO


pseudo element can be replaced by any inline-block element introduced in HTML right after , with same CSS value.


CSS used for the HTML you gave us :

.info:after {
  content:'';
  display:inline-block;
  border-bottom:1px yellow solid;
  width:100%;/* you can tune it */
  margin-right:-100%;
  vertical-align:middle;/* set in middle aside text or inline-box */
}
.info {
  overflow:hidden;/* optionnal , but needed in most cases */
  background:#333; /* anything, image, gradient, color */
}