Set marker outside of the box containing the bullet points with CSS

JavascriptWeb DevelopmentFront End Scripts

<p>To set marker outside of the box containing the bullet points, use the<em>&nbsp;</em>list-style-position property with the value<em>&nbsp;outside</em>.</p><h2>Example</h2><p>&nbsp;The <em>outside&nbsp;</em>value means if the text goes onto a second line, the text will be aligned with the start of the first line</p><pre class="prettyprint notranslate">&lt;html&gt; &nbsp; &nbsp;&lt;head&gt; &nbsp; &nbsp;&lt;/head&gt; &nbsp; &nbsp;&lt;body&gt; &nbsp; &nbsp; &nbsp; &lt;ul style = &quot;list-style-type:circle; list-style-position:outside;&quot;&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;li&gt;Maths&lt;/li&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;li&gt;Social Science&lt;/li&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;li&gt;Physics&lt;/li&gt; &nbsp; &nbsp; &nbsp; &lt;/ul&gt; &nbsp; &nbsp; &nbsp; &lt;ol style = &quot;list-style-type:decimal;list-style-position:outside;&quot;&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;li&gt;Maths&lt;/li&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;li&gt;Social Science&lt;/li&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;li&gt;Physics&lt;/li&gt; &nbsp; &nbsp; &nbsp; &lt;/ol&gt; &nbsp; &nbsp;&lt;/body&gt; &lt;/html&gt;</pre>
raja
Updated on 03-Feb-2020 07:32:20

Advertisements