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

Popular posts from this blog

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* -

mediawiki - How do I insert tables inside infoboxes on Wikia pages? -

Local Service User Logged into Windows -