Applying pseudo class "before" and "after" to multi-line text

user_10313637 0
Viewed 1128

I am trying to add a pseudo before and after vertical line to a textfield for styling purposes. These elements need to be flush to the text -20px left and -20px right.

This works fine when the text is on one line as an inline-block, but as soon as the text spans multiple lines the width expands to that of the parent and the pseudo elements are no longer just 20px from the text.

Is there a way in which I can accomplish this using CSS?

.container {
  width: 500px;
  background-color: red;
  text-align: center;
  margin-left: 40px;
}

h2 {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
  background-color: blue;
  color: white;
}

span {
  position: relative;
  background-color: green;
}

h2::before,
h2::after {
  content: '';
  position: absolute;
  top: 0;
  width: 4px;
  height: 20px;
  background: black;
}

h2::before {
  left: -20px;
}

h2::after {
  right: -20px;
}
<!--  Single line example works as the black bars are 20px away from the start/end of text-->
<div class="container">
  <h2><span>This is a title</span></h2>
</div>

<br> <br>

<!--  double line doesn't work because the h2 is now the full width of the container -->
<div class="container">
  <h2><span>This is loooonnggggggggggggggggggggggeeeeerrr</span></h2>
</div>

Edit: Here is a working version using tables, but if anyone has a better solution I'd love to hear it: https://codepen.io/anon/pen/MqveLQ

css html
2 Answers

I have moved your code to this fiddle: https://jsfiddle.net/n2Lr6xy5/13/ and removed position: absolute along with stripping out some of the other styles as they seemed unnecessary and I think I have created what you're after.

Here is the updated CSS:

.container {
  width: 500px;
  background-color: red;
  text-align: center;
  margin-left: 40px;
}


h2{
  display: inline-block;
}

h2:after,
h2:before {
  content: "";
  width: 4px;
  height: 20px;
  background: #000000;
  display: inline-block;
  margin: 0 10px;
}
user_13037790

So from what i can see is the issue here is where you are applying the borders with before and after. You need to alter where you apply your borders. Remove them from the h2, and add in a new html element that wraps the h2 and apply there.

eg:

    <div class="container">
      <div class="headerwrap">
         <h2><span>This is loooonnggggggggggggggggggggggeeeeerrr</span></h2>
      </div>
    </div>

    <div class="container">
      <div class="headerwrap">
        <h2><span>This is a title</span></h2>
      </div>
    </div>

CSS

    .headerwrap::before,
    .headerwrap::after {
       content: '';
       position: absolute;
       top: 0px;
       bottom:0;
       margin:auto;
       width: 4px;
       height: 20px;
       background: black;
     }

     .headerwrap::before {
       left: 10px;
      }

      .headerwrap::after {
        right: 10px;
      }

Here is a working example: https://codepen.io/FEARtheMoose/pen/VGbJjO?editors=1100#0

Edit: altered example after comments - https://codepen.io/FEARtheMoose/pen/VGbJjO

user_31940160
Related