tofu tofu - 1 year ago 102
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>

Answer Source

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.


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 {
  border-bottom:1px yellow solid;
  width:100%;/* you can tune it */
  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 */
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download