I've been struggling to split text inside an :after pseudo-element of a label that receives its content from a data- attribute. I've attempted using word-break, as well as playing around with width, max-width, and position:relative, but nothing seems to be working...
Here's the HTML:
<div class="checkbox">
<input type="checkbox" name="checkme" id="checkme" />
<label for="checkme" data-content="Some very lengthy text that needs to be broken into two lines similar to a br tag"></label>
</div>
And here's the CSS:
.checkbox {
display:block;
clear:both;
position:relative;
}
.checkbox:not(:only-child):not(:first-child) {
margin:10px 0 0 0;
}
.checkbox input {
display:none;
}
.checkbox label {
display:inline-block;
cursor:pointer;
position:relative;
width:13px;
height:13px;
border:1px solid #383838;
}
.checkbox label:after {
font-family:Arial;
font-size:14.5px;
color:#383838;
display:inline-block;
position:absolute;
left:calc(100% + 7px);
content:attr(data-content);
cursor:text;
white-space:pre;
word-break:break-all;
top:50%;
-webkit-transform:translate(0,-50%);
-moz-transform:translate(0,-50%);
transform:translate(0,-50%);
/* max-width and width not working... */
max-width:160px !important;
width:160px !important;
}
.checkbox input:checked ~ label:before {
display:block;
}
.checkbox input:not(:checked) ~ label:before {
display:none;
}
.checkbox label:before {
font-size:16px;
color:#383838;
display:block;
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
pointer-events:none;
margin:0;
width:auto;
content:"X";
font-family:Arial;
}
Can anyone provide guidance on how to fix this issue (or point out what mistakes I might have made)?
Thank you.