Как нарисовать маркер и вертикальную линию в элементе списка в HTML, CSS - PullRequest
Новая
       2

Как нарисовать маркер и вертикальную линию в элементе списка в HTML, CSS

0 голосов
/ 12 июня 2018

https://jsfiddle.net/1fynun7a/1/

В этой скрипте с использованием дерева образцов со строками и вложенного дерева также содержится строка. 

[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.]

image

Ответы [ 2 ]

0 голосов
/ 12 июня 2018

Добавлен пустой диапазон в каждом li и следующий CSS 

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: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>
0 голосов
/ 12 июня 2018

Вы можете сделать это с другим псевдоэлементом;после 

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;
}

Вы можете изменить размер символа маркера в списках следующим образом: 

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

Но я не уверен, что разные браузеры размещают точку в правильном положении, возможно используйте фоновое изображение для символа маркера

Редактировать: Используйте это для элемента после (лучше, чем использовать "." в качестве маркера): 

li:after{ 
    content: "";
    position: absolute;
    left: -5px;
    top: 7px;
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%; 
    background-color: red;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...