これは私が達成しようとしているものですが、それはそれを把握することはできません。小国境
ul {
list-style-type: none;
}
li {
height: 50px;
width: 180px;
line-height: 50px;
background: #ddd;
display: inline-block;
text-align: center;
}
li:hover {
box-shadow: 0 5px 0 0 gold;
}<ul>
<li>Hello</li>
<li>World</li>
</ul>私はちょうどそれを取得しようとしています上記写真のように。
あなたが使用することができますpseudo elements
ul {
list-style-type: none;
}
li {
height: 50px;
width: 180px;
line-height: 50px;
background: #ddd;
display: inline-block;
text-align: center;
position:relative;
}
li:hover:after {
content: '';
border-bottom: 5px solid gold;
width: 50px;
position: absolute;
bottom: 0;
left: calc(50% - 25px); /* This will make border center aligned */
}<ul>
<li>Hello</li>
<li>World</li>
</ul>答えAbhishekありがとう私はあなたの答えとしてマークしました:) – user3502952
ハッピーに役立つ:) –
変更のCss同様
li {
height: 50px;
width: 180px;
line-height: 50px;
background: #ddd;
display: inline-block;
text-align: center;
position:relative; /*add This Property*/
}
li:hover:after {
content:"";
position:absolute;
box-shadow: 0 5px 0 0 gold;
width:30px;
left:50%;
bottom:0px;
height:10px;
margin-left:-15px;
}
ul {
list-style-type: none;
}
li {
height: 50px;
width: 180px;
line-height: 50px;
background: #ddd;
display: inline-block;
text-align: center;
position:relative
}
li:hover:after {
content:"";
position:absolute;
box-shadow: 0 5px 0 0 gold;
width:30px;
left:50%;
bottom:0px;
height:10px;
margin-left:-15px;
}<ul>
<li>Hello</li>
<li>World</li>
</ul>ちょっとLalji、助けてくれてありがとう:) – user3502952
あなたはこのようpseude要素を追加することができます。
CSS
ul li{position:relative;}
ul li:hover::after{content:"";position:absolute;height:1px;width:25px;background-color:gold;bottom:0;left:50%;transform:TranslateX(-50%);}
私たちを希望Eその少しラインの要素の後
ul {
list-style-type: none;
}
li {
display: inline-block;
padding: 0.75em 1.5em; /* I would use padding instead of fixed width and height */
text-transform: uppercase; /* make text uppercase */
position: relative;
}
li:hover {
color: green; /* change this to your green color */
}
li:hover:after {
content:'';
display:block;
position:absolute; /* position this at the bottom */
bottom:0;
left:35%; /* left and right determine length of line, the longer you want it, the closer to 0 these values should be */
right:35%;
height:2px;
background:green; /* match the font color */
}<ul>
<li>Hello</li>
<li>World</li>
</ul>答えピートのおかげで:) – user3502952
あなたは歓迎です:) – Pete
の可能性のある重複した[divの幅より小さいボーダーの長さ？]（ https://stackoverflow.com/questions/8572952/border-length-smaller-than-div-width） – chazsolo