Put Line Break on content of :after

user_7119647 0
Viewed 64

I would like to have a line break before and after or word in the content text. I tried with word-spacing, but that did not give me the exact style I wanted. I also tried to put \A, and it just shows A on the text. Is there way to achieve my goal?

Expected:

Expected

Actual: 

#t {
   height: 153px;
  width: 401px;
  border: 1px dashed #5fb6c5;
  background-color: #f8f8f8;
}

#t:after {
   content: attr(data-text);
    font-size: 14px;
    line-height: 19px;
    color: #000;
    opacity: 0.30;
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    top: 50%;
    white-space: pre-wrap;
    vertical-align: middle;
    text-align: center;
}
<div id="t" data-text="Drag your image here or Click to add" />

css html
4 Answers

I also tried to put \A, and it just shows A on the text.

\A would work as an escape sequence for a line break in CSS - but here your context is not CSS, you have a custom data attribute here that you are holding this piece of text in, so the primary context is HTML.

data-text="Drag your image here&#10;or&#10;Click to add"

&#10; is the numeric HTML entity for a line break, and I think using that one makes the most sense here.

user_102830470

You can achieve this like this

create text as different attributes and split them with "\A" at after pseudo 

#t {
   height: 153px;
  width: 401px;
  border: 1px dashed #5fb6c5;
  background-color: #f8f8f8;
}

#t:after {
   content: attr(data-text1) "\A" attr(data-text2) "\A" attr(data-text3);
    font-size: 14px;
    line-height: 19px;
    color: #000;
    opacity: 0.30;
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    top: 50%;
    white-space: pre-wrap;
    vertical-align: middle;
    text-align: center;
}
<div id="t" data-text1="Drag your image here" data-text2= "or" data-text3="Click to add" />

user_38409290

You can also use a 'hack' to do this. By using two pseudo elements and position them with the use of flex.

It's not the best solution and it involves some changes in html but it does the trick in this specific case.

#t {
  height: 153px;
  width: 401px;
  border: 1px dashed #5fb6c5;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 14px;
  line-height: 19px;
  color: #000;
}

#t:after,
#t:before {
  position: relative;
  width: 100%;
  display: block;
  text-align: center;
}

#t:after {
  content: attr(data-text2);
}

#t:before {
  content: attr(data-text1);
}
<div id="t" data-text1="Drag your image here " data-text2="Click to add">
  <span>or</span>
</div>

user_64411240

We can also use HTML tag as below:

<pre>
    <div id="t" data-text="Drag your image here
    or
    Click to add" />
    </pre>

user_82841470
Related