左三角有了，怎么做一个右三角


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2-4伪元素选择器title>
head>
<style>
li{width:170px;font:30px "隶书";
    padding: 5px;margin: 10px;
    background-color: lightgray;
    list-style-type: none;text-align: center;
border-radius: 5px;}
ul{display: inline-block;}
a{text-decoration: none;}
a:link{color: blue;}
a:visited{color: red;}
a:hover{color: yellow;}
a:active{color: green;}
li:hover::before{
content:'';
display:inline-block;
width:0px;
height:0px;
border-style:solid;
border-width:10px;
border-color: transparent transparent transparent red;
li:hover::after{
content:'';
display:inline-block;
width:0px;
height:0px;
border-style:solid;
border-width:10px ;
border-color: transparent transparent transparent red;

}
style>
<body>
    <ul>
        <li><a href="#1">学校概况a>li>
        <li><a href="#2">院校设置a>li>
        <li><a href="#3">教育教学a>li>
        <li><a href="#4">科学研究a>li>
        <li><a href="#5">招生就业a>li>
        <li><a href="#6">合作交流a>li>
        <li><a href="#7">诚聘英才a>li>
        <li><a href="#8">智慧校园a>li>
    ul>
body>
html>
}

img

img


这样的效果

原有样式不动，追加一个旋转180度的样式即可

该回答引用GPTᴼᴾᴱᴺᴬᴵ
要在 CSS 中创建一个右三角，可以借助伪元素 ::before 或 ::after，并将 border-color 中的值修改为红色所代表的位置放到右侧。

以下是你提供的 HTML 和 CSS 代码的修改版，增加了右三角的样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2-4伪元素选择器</title>
</head>
<style>
li {
    width: 170px;
    font: 30px "隶书";
    padding: 5px;
    margin: 10px;
    background-color: lightgray;
    list-style-type: none;
    text-align: center;
    border-radius: 5px;
    position: relative; /* 添加相对定位 */
}
ul {
    display: inline-block;
}
a {
    text-decoration: none;
}
a:link {
    color: blue;
}
a:visited {
    color: red;
}
a:hover {
    color: yellow;
}
a:active {
    color: green;
}
li:hover::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px;
    border-color: transparent red transparent transparent; /* 修改为右三角 */
    position: absolute; /* 相对于 li 元素定位 */
    top: 50%; /* 向上偏移 50% 的高度 */
    right: -20px; /* 向右偏移 20px 的宽度 */
    transform: translateY(-50%); /* 垂直居中 */
}
</style>
<body>
    <ul>
        <li><a href="#1">学校概况</a></li>
        <li><a href="#2">院校设置</a></li>
        <li><a href="#3">教育教学</a></li>
        <li><a href="#4">科学研究</a></li>
        <li><a href="#5">招生就业</a></li>
        <li><a href="#6">合作交流</a></li>
        <li><a href="#7">诚聘英才</a></li>
        <li><a href="#8">智慧校园</a></li>
    </ul>
</body>
</html>

这样就可以在 li 元素的右侧添加一个红色的三角形了。

【若有帮助，望给个采纳，谢谢】
1、第一种实现方式，旋转

li:hover::after{
content:'';
display:inline-block;
width:0px;
height:0px;
border-style:solid;
border-width:10px ;
border-color: transparent transparent transparent red;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}

img

2、第二种，改变颜色位置【推荐】

li:hover::after{
content:'';
display:inline-block;
width:0px;
height:0px;
border-style:solid;
border-width:10px ;
border-color: transparent red transparent transparent;
}

img