Css: Before Visible When Overflow Hidden
There Is Possible to Display Something Befere? When Overflow Is Hidden? or Maybe Can We Specifiy with Side Will Be Hidden from Overflow? for Ex: .Before {...
there is possible to display something befere? when overflow is hidden? or maybe can we specifiy with side will be hidden from overflow? for ex:
.before {
width: 200px;
margin: 30px;
background-color: blue;
height: 30px;
position: relative;
}
.before:before {
content: "221";
color: blue;
font-size: 15px;
display: inline-block;
position: absolute;
left: -20px;
top: -20px;
}
#ex2 {
overflow: hidden;
}<div id='ex1' class='before'>Wisible text with css before, more text, more and more... but </div>
<div id='ex2' class='before'>hidden overflow text with css before... more and more text</div>1 Answer
If you declare an element to have overflow: hidden it will apply to all content, including before and after elements. There is no way to disable the hidden value for a specific child.
Consider wrapping your content in a div with a maximum width and height of its parent, and setting oveflow: hidden on that div instead. The root element's before and after pseudoelements will exist outside the wrapper so won't be affected.
.before {
width: 200px;
margin: 30px;
background-color: blue;
height: 30px;
position: relative;
}
.before:before {
content: "221";
color: blue;
font-size: 15px;
display: inline-block;
position: absolute;
left: -20px;
top: -20px;
}
#ex2 > .wrapper {
overflow: hidden;
max-width: 100%;
max-height: 100%;
}<div id='ex1' class='before'><div class="wrapper">Visible text with css before, more text, more and more... but </div></div>
<div id='ex2' class='before'><div class="wrapper">Hidden overflow text with css before... more and more text</div></div>Robert Thorne covers electric vehicle innovations, autonomous driving systems, global mobility trends, and automotive engineering developments.
