简体   繁体   中英

Display Property - Table, Row, Cell - How to Add Border to Bottom of Each LI now Being Displayed as a Row?

I have a unordered list which I am displaying as a table so I can insert a custom windgbat before each li tag. This list is also not indented but flush with the left side of normal paragraphs.

How do I add a border on the bottom of each li now each one of those is being displayed as a table row?

I've attempted add the following to the code below in various ways but it will not display a border.

border-bottom: 1px solid #25a186;

.post-body ul{
list-style-type: none;
margin-left: 0px;
padding-left: 0em;
text-indext: -1em;
display: table;
}

.post-body li{
display: table-row;
}

.post-body ul li::before{
content:"\261e";
color: #8d8d8d;
text-align: right;
padding-right: .6em;
display: table-cell;
}

I finally found a solution:

It uses uses boxshadow to emulate a border and ignores the first li.

The top two styles are for browsers which may not supprt CSS3 and may not be necessary for modern browsers.

.post-body ul li + li{
-moz-box-shadow: 0 -1px 0 #8d8d8d;
-webkit-box-shadow: 0 -1px 0 #8d8d8d;
box-shadow: 0 -1px 0 #8d8d8d;
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM