How to give the bullet and vertical line draw into list item in HTML,CSS

Question

In this fiddle using sample tree with lines and nested tree contain also line.

[AS pet the jsfiddle there is a list item ,but I want bullet symbols 
 exactly same as into the image,

Any help would greatly appreciated ?
Thanks in advance.]

Answer 1

You can do it with another pseudo-element; after

li{
/* This allows to adjust the after element relative to the <li> tag */
position: relative;
}

li:after {
    content: ".";
    position: absolute;
    left: -5px;
    top: -7px;
    font-size: 35px;
}

You can change the size of the bullet symbol in the lists like this:

/* First */
ul li:after{
 font-size: 35px;
}
/* Second */
ul ul li:after{
 font-size: 40px;
}
/* And so on... */
ul ul ul li:after{
}

But I'm not sure if different browsers place the dot in the right position, maybe use an background-image for the bullet symbol

Edit: Use this for your after Element (better than using "." as bullet):

li:after{ 
    content: "";
    position: absolute;
    left: -5px;
    top: 7px;
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%; 
    background-color: red;
}

Answer 2

Added an empty span in each li and the following CSS

ul.tree li span {
     position: absolute;
     left: -6px;
     top: 5px;
     display: inline-block;
     width:10px;  
     height: 10px;
     background-color: red;
     border-radius: 5px;
}

Also updated the following style

   ul.tree li:before {
  position:relative;
  top:-0.3em;
  height:1em;
  width:12px;
  color:white;
  border-bottom:1px solid rgb(100,100,100);
  content:"";
  display:inline-block;
  left:-8px;
   }

 ul.tree, ul.tree ul { list-style: none; margin: 0; padding: 0; } ul.tree ul { margin-left: 10px; } ul.tree li { margin: 0; padding: 0 7px; line-height: 20px; color: #369; font-weight: bold; border-left:1px solid rgb(100,100,100); position: relative; } ul.tree li span { position: absolute; left: -6px; top: 5px; display: inline-block; width:10px; height: 10px; background-color: red; border-radius: 5px; } } ul.tree li:last-child { border-left:none; } ul.tree li:before { position:relative; top:-0.3em; height:1em; width:12px; color:white; border-bottom:1px solid rgb(100,100,100); content:""; display:inline-block; left:-8px; } ul.tree li:last-child:before { border-left:1px solid rgb(100,100,100); }

 <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title></title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="robots" content="noindex, nofollow"> <meta name="googlebot" content="noindex, nofollow"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="/js/lib/dummy.js"></script> <link rel="stylesheet" type="text/css" href="/css/result-light.css"> <style type="text/css"> ul.tree, ul.tree ul { list-style: none; margin: 0; padding: 0; } ul.tree ul { margin-left: 10px; } ul.tree li { margin: 0; padding: 0 7px; line-height: 20px; color: #369; font-weight: bold; border-left:1px solid rgb(100,100,100); position: relative; } ul.tree li span { position: absolute; left: -6px; top: 5px; display: inline-block; width:10px; height: 10px; background-color: red; border-radius: 5px; } } ul.tree li:last-child { border-left:none; } ul.tree li:before { position:relative; top:-0.3em; height:1em; width:12px; color:white; border-bottom:1px solid rgb(100,100,100); content:""; display:inline-block; left:-8px; } ul.tree li:last-child:before { border-left:1px solid rgb(100,100,100); } </style> <!-- TODO: Missing CoffeeScript 2 --> <script type="text/javascript"> window.onload=function(){ } </script> </head> <body> <ul class="tree"> <li><span></span>Animals <ul> <li><span></span>Birds</li> <li><span></span>Mammals <ul> <li><span></span>Elephant</li> <li><span></span>Mouse</li> </ul> </li> <li><span></span>Reptiles</li> </ul> </li> <li><span></span>Plants <ul> <li><span></span>Flowers <ul> <li><span></span>Rose</li> <li><span></span>Tulip</li> </ul> </li> <li><span></span>Trees</li> </ul> </li> </ul> <script> // tell the embed parent frame the height of the content if (window.parent && window.parent.parent){ window.parent.parent.postMessage(["resultsFrame", { height: document.body.getBoundingClientRect().height, slug: "" }], "*") } </script> </body></html>

How to give the bullet and vertical line draw into list item in HTML,CSS

Question

2 answers

solution1
0 2018-06-12 16:46:41

solution2
0 2018-06-12 16:58:35

How to give the bullet and vertical line draw into list item in HTML,CSS

Question

2 answers

solution1 0 2018-06-12 16:46:41

solution2 0 2018-06-12 16:58:35

solution1
0 2018-06-12 16:46:41

solution2
0 2018-06-12 16:58:35