html - CSS Before Selector and Margin issues -
html - CSS Before Selector and Margin issues -
i'm trying utilize before selector mimic behavior of list item when applied elements. can't utilize list items have able styles work.
here fiddle showing issue: http://jsfiddle.net/7g6ncg7u/
.container { width:300px; } .up:before{ content:'\25b2'; color:green; padding-right:10px; margin:1px; } .down:before{ content:'\25bc'; color:red; padding-right:10px; margin:1px; }
what want have happen 2nd line of 2nd span align text above it, not start of line presently doing.
you can utilize float
this:
.down { clear:both; } .down:before{ content:'\25bc'; float:left; /**add this**/ color:red; padding-right:10px; margin:1px; }
check snippet below class="snippet-code-css lang-css prettyprint-override">.container { width: 300px; } .down { clear: both; } .up:before { content: '\25b2'; color: green; padding-right: 10px; margin: 1px; } .down:before { content: '\25bc'; float: left; color: red; padding-right: 10px; margin: 1px; }
class="snippet-code-html lang-html prettyprint-override"><div class="container"> <span class="down" style="display: block;">regular bullet point text</span> <span class="down" style="display: block;">regular bullet point text 1 longer , wrap</span> </div>
html css html5
Comments
Post a Comment