CODEWITHSUNDEEP
cssunicodehtml-listsemoji
velkoon
velkoon

Reputation: 962

Replace bullet points with emojis (or other Unicode characters) (But Don't change nested bullets)

In my sandbox here:

.thunderbolt li:nth-child(1):before {content: "\26A1  ";}
.thunderbolt li:nth-child(2):before {content: "🔁 ";}
.thunderbolt li:nth-child(3):before {content: "🏃 ";}
.thunderbolt li:nth-child(4):before {content: "🕔 ";}
.thunderbolt li:nth-child(5):before {content: "🚫 ";}
.thunderbolt li:nth-child(6):before {content: "\2685";}
<div>
<ul class="thunderbolt">
<li>ThunderBolt devices only get recognized by BootCamp on boot.</li>
<li>If you unplug your ThunderBolt device while using Windows, you'll have to shut down then reboot your OS to get it recognized again.</li>
<li>Disable <b>Fast Startup </b>in Windows 8/10.</li>
<ul>
<li>Also try holding <b>Shift </b>when you click&nbsp;<b>Start </b>&gt; <b>Shut down</b>.</li>
</ul>
<li>Wait a solid chunk of seconds on the login screen after boot to allow BootCamp to configure Thunderbolt devices.</li>
<li><b>Sleep&nbsp;</b>simply does not work in BootCamp with a ThunderBolt device connected.</li>
</ul>
</div>

http://www.cssdesk.com/M6Cyz

I want the unicode characters to replace the bullet points. Instead, the characters are just showing up alongside the bullet points, in-line with the text.

Also, I don't want the .thunderbolt class to apply to the nested <ul>--I just want that to be a standard bullet point.

I've tried .thunderbolt list-style: none but all that did was make my thunderbolt symbol disappear.

Also, the resulting webpage displayed skips the character in .thunderbolt li:nth-child(4):before {content: "🕔 ";} for the 4th child and displays the character from .thunderbolt li:nth-child(5):before {content: "🚫 ";} instead. It seems the code treats the one nested <li> as if it were the 4th child in the parent <ul>.

  1. How do I replace the bullent points in a <ul> with a unicode character?
  2. How do I tell the CSS to skip nested <ul>'s when applying nth-child(n) properties?

Upvotes: 1

Views: 6517

Answers (2)

velkoon
velkoon

Reputation: 962

ul.thunderbolt > li:nth-child(1) {
  list-style: "\26A1   ";
  list-style-position: outside;
}
ul.thunderbolt > li:nth-child(2) {
  margin-top: 10px;  
  list-style: "🔁  ";
  list-style-position: outside;
}
ul.thunderbolt > li:nth-child(3) {
  margin-top: 10px;
  list-style: "🚫  ";
  list-style-position: outside;
}
ul.thunderbolt > li:nth-child(5) {
  margin-top: 10px;
  list-style: "🕔  ";
  list-style-position: outside;
}
ul.thunderbolt > li:nth-child(6) {
  margin-top: 10px;
  list-style: "😴  ";
  list-style-position: outside;
}
ul.thunderbolt ul li {
  margin-top: 10px;
  list-style-type: circle;
}
<ul class="thunderbolt">
<li>ThunderBolt devices only get recognized by BootCamp on boot.</li>
<li>If you unplug your ThunderBolt device while using Windows, you'll have to shut down then reboot your OS to get it recognized again.</li>
<li>Disable <b>Fast Startup </b>in Windows 8/10.</li>
<ul>
<li>Also try holding <b>Shift </b>when you click&nbsp;<b>Start </b>&gt; <b>Shut down</b>.</li>
</ul>
<li>Wait a solid chunk of seconds on the login screen after boot to allow BootCamp to configure Thunderbolt devices.</li>
<li><b>Sleep&nbsp;</b>simply does not work in BootCamp with a ThunderBolt device connected.</li>
</ul>

  • The > li makes the style changes only affect elements in the parent list.
  • I used ul.class_name ul li to change the list-style-type of the one nested <li> item to an open circle instead of a closed disc.
  • I was doing this in Blogspot, which has a built-in style sheet (that I didn't want to backup, edit, then reupload), so I had to add !important after my changes in order for them to apply.
    • Examples:
    • list-stye: "\26A1 "!important;
    • list-style-position: outside!important;
  • The CSS still considered the nested <li> as nth-child(4), so I had to skip it in my nth-child(n) numbering in my parent list. (Notice I do nth-child(3) then skip to nth-child(5).)

Credit

Upvotes: 3

Tanvir Ahammad Chy
Tanvir Ahammad Chy

Reputation: 27

Answer 1: If you use unicode instead of bullets, you will need to use,

.thunderbolt li: {
   position: relative;
   list-style: none;
   overflow: hidden;
}
.thunderbolt li:after {
   position: absolute;
   top: 50%;
   left: -2%;
   transform: transletX(-50%);
}

And please use your unicode as a position: absolute;, I hope your code is easy solution. Same css will work all li but individually you just change content: 'here is your unicode'; I hope it will be easiest way to implement unicode items instead of bullet item.

Answer 2: If you use .thundebolt > li then i hope it will work only on specific list. You can try it.

Note: If you have better solution let me, i want to know more from you, thank you!

Upvotes: 0

Related Questions