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>Visible text with css before, more text, more and more... but </div></div> <div id='ex2' class='before'><div>Hidden overflow text with css before... more and more text</div></div>
