在简单的HTML + CSS中添加垂直列表中第一项和最后一项旁边的文本
在简单的HTML + CSS中添加垂直列表中第一项和最后一项旁边的文本，可以通过以下步骤实现：
- 首先，创建一个HTML文件，并在文件中添加一个垂直列表。可以使用
<ul>和<li>标签来创建列表，如下所示：
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
<li>第五项</li>
</ul>- 接下来，使用CSS来添加第一项和最后一项旁边的文本。可以使用CSS选择器和伪类来选择第一项和最后一项，并使用
::before和::after伪元素来添加文本。例如，以下CSS代码将在第一项和最后一项旁边添加文本：
li:first-child::before {
content: "前文本 ";
}
li:last-child::after {
content: " 后文本";
}- 将上述CSS代码添加到HTML文件中的
<style>标签内或者将其保存为一个独立的CSS文件，并在HTML文件中使用<link>标签引入。
完整的HTML代码如下所示：
<!DOCTYPE html>
<html>
<head>
<title>垂直列表添加旁边文本</title>
<style>
li:first-child::before {
content: "前文本 ";
}
li:last-child::after {
content: " 后文本";
}
</style>
</head>
<body>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
<li>第五项</li>
</ul>
</body>
</html>这样，第一项和最后一项旁边就会显示添加的文本。你可以根据需要自定义文本内容和样式。
请注意，以上答案中没有提及任何特定的云计算品牌商，如腾讯云等。如果需要了解腾讯云相关产品和产品介绍，可以访问腾讯云官方网站获取更多信息。
相关·内容
1回答
我在试着做面包屑
我的最终目标是Item1/.../.../Item4
因此，我能够制作Ite...，但我只想让它像上面的例子一样只使用...。请提供代码示例(它对我帮助很大，因为我是css/html的初学者)，谢谢！
我试过的..。
//index.html
<ul class="breadcrumbs">
<li class="breadcrumbs__item">Item 1</li>
<li class="breadcrumbs__item">Item 2</li>
浏览 2提问于2022-08-03得票数 -2
回答已采纳
我有一个“步骤”导航，它使用表格/表格单元格来确保每个项目都是相同的宽度，并占据完整的菜单容器。但由于它的设计方式，我希望第一个和最后一个孩子的内容与父母的边缘一致。有什么想法吗？也许我走错路了..。
用代码更容易解释：
HTML:
<ul>
<li>
<span class="title">Item 1</span>
<span class="fa fa-automobile"></span>
</li>
&l
浏览 2提问于2014-08-14得票数 0
如何使用CSS或jQuery设置第一个(顶层) li和最后一个(顶层) li的样式？
我使用CSS来设置第一个li样式，但它也设置了每个二级ul中的第一个li的样式，那么如何才能让它只设置包含MAIN1的li和包含MAIN6的最后一个样式呢？
下面是我的代码：
<style>
ul li:first-child
{
width: 800px;
border:1px solid #fc5604; border-top-width:thin; (2px)
}
</style>
和HTML：
<div id="nav">
<ul>
浏览 119提问于2012-01-17得票数 24
我正在寻找一种方法来使用CSS在XHTML中设置无序列表的样式，以便它以内联方式呈现，并用逗号分隔列表项。
例如，下面的列表应该呈现为apple, orange, banana (注意列表末尾缺少的逗号)。
<ul id="taglist">
<li>apple</li>
<li>orange</li>
<li>banana</li>
</ul>
目前，我正在使用下面的CSS来设计这个列表的样式，它几乎做了我想要的事情，但是将列表呈现为apple, orange, ban
浏览 2提问于2009-10-04得票数 75
回答已采纳
5回答
我想在每个列表项的右边放一条小垂直线(除了最后一项)，但我想知道除了添加一个新的div或其他东西来容纳这一行之外，是否还有其他方法可以做到这一点。我尝试只为列表添加一条边框线，但它添加的边框线比我需要的多了一条。
html
<ul class="list">
<li><span id = "home">Home</span></li>
<li><span id = "about">About</span>
浏览 1提问于2014-08-31得票数 1
2回答
我有下面的Nav酒吧。我想转移它的登录/注册组件在最左边的导航栏，但找不到方法去做它。什么是可能的解决方案，我已经尝试了填充-左:0的东西登录li元素，但这似乎不起作用。如果能在这方面提供任何帮助，我们将不胜感激。
HTML:
body {
margin: 0;
background: #222;
font-weight: 300;
background-image: url('bg.jpeg');
}
header {
background: #d9c2ac;
position: relative;
}
header::after {
co
浏览 1提问于2018-02-15得票数 0
<ul>
<li>number</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
和样式表：
ul {
list-style-type: none
}
ul li {
float: left;
}
li:after {
content: ", "
}
l
浏览 0提问于2013-01-30得票数 0
嗨，我想摆脱这个菜单中的最后一个分隔符 <-正如你在这里看到的‘联系我们’链接，在那之后有分隔符，我不想显示它。我试过了
#nav ul li:last:after{
content:'';
}
但不起作用
这是菜单的标记
HTML
<div id="nav" class="center"><!-- nav [START] -->
<ul>
<li><a href="#" title="Hom
浏览 3提问于2011-01-07得票数 0
我想要达到这样的效果： 000 Lorem ipsum
dolor
0 Lorem ipsum
dolor 这是我正在使用的代码： <ul>
<li>Lorem ipsum dolor sit amet, sed do eiusmo</li>
<li>Lorem ipsum dolor sit amet elit</li>
</ul> CSS： li:before {
content: "0";
}
li:first-child:before {
content:
浏览 27提问于2019-06-04得票数 0
回答已采纳
我正在尝试定位无序列表的list-item中的第一个和最后一个锚点：
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a>&l
浏览 0提问于2010-11-19得票数 3
回答已采纳
我一直在处理一个自定义进度条，它显示了三种步骤:完成步骤、繁忙步骤和待办步骤。基本的html ul li是基于柔性盒的，其中项目可以添加或删除，而不破坏布局的完整性。
我希望这些步骤能够向左和向右扩展，但如果不打破项目的宽度，就无法做到这一点。所有步骤的宽度应相等。当前的设计工作(并且必须继续工作)有一、二、三、四或五个步骤。
我要整个进度条孔状伸展，并完全填满黄色区域。
最终的预期结果应该如下所示：
在这里，第一个也是最后一个项目应该触及黄色背景的末端，一个所有的符号应该集中在文本单词的上方。
可以有两个变化: 1)子弹之间的距离相等。( 2)字词长度上的符号间距。两者都
浏览 10提问于2022-06-03得票数 1
回答已采纳
当列表的左边有一个浮动的div时，我想不出一个方法来解决列表缩进的问题。我想使用‘list-style-position: out’，但是这个外侧缩进与左div重叠，如果使用'list-style-position:inside‘，第二行的文本对齐不会与第一行对齐。以下是我的代码：
<html>
<head>
<title>List Problem</title>
<style type="text/css">
</style></head>
<body>
<div s
浏览 1提问于2012-01-14得票数 1
2回答
我有两个<a>标签，它是HTML，如下所示：
<ul>
<li><a href="#">This is my link</a></li>
<li><a href="#">This is my link</a></li>
</ul>
我想要的是，将链接文本替换为：
<ul>
<li><a href="#">custom 1</a></li>
&
浏览 0提问于2020-06-02得票数 0
我正在使用django mptt来显示导航菜单。
{% load mptt_tags %}
<ul class="nav_menu">
{% recursetree nav_link.get_descendants %}
{% if node.is_shown %}
<li>
<a href="{{ node.url }}">{{ node.title }}</a>
{% if not node.is_l
浏览 1提问于2012-01-20得票数 0
3回答
我需要删除列表中第一个项目的左边框和第四个项目的右边框，而不影响这些项目的任何子列表。我该怎么做呢？
我的菜单列表代码是：
<div id="menu">
<ul><li><a href="#">First Item</a><ul>
<li><a href="#">First Sub Item</a></li>
<li><a href="#">Second Sub Item&l
浏览 9提问于2012-05-02得票数 1
我想在每个li标签的末尾添加一个管道，不包括第一个和最后一个。有没有更好的方法来做到这一点，在想也许使用:nth-child()选择器？
.categoryMenu ul li::after {
content: ' | ';
}
.categoryMenu ul li:nth-child(1) {
content: 'hello';
background: red;
}
似乎内容css属性不适用于:nth-child()只适用于::after。
浏览 7提问于2016-04-06得票数 2
回答已采纳
1回答
在这里，我对我的HTML+CSS的当前视图：
演示：
我当前的HTML：
<ul class="vertical-point-progress">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Ut enim ad minim veniam, quis nostrud exercitati
浏览 1提问于2021-01-15得票数 0
回答已采纳
我想要创建一个有多个父母的树形图。其思想是为Dota 2项创建一个关系图，其中几个项可以被分成一个项目(加上一个菜谱)，和/或一个项可以被做成多个可能性(多个父项)。
我的参考资料之一来自。
到目前为止，这是在小提琴上的表现。
<div class="items">
<ul>
<li>
<a href="#" class="">Dagon</a>
<a href="#" class="">V
浏览 0提问于2018-04-13得票数 5
回答已采纳
4回答
我正在创建一个导航菜单，我使用的是::after伪元素，我想实现以下目标：
居家/关于个人项目的文章
这是我的css代码：
nav ul li::after{
content: " | ";
}
这是我的HTML标记：
<nav class="wrapper">
<ul>
<li><a href="/">home</a></li>
<li><a href="/about.php">
浏览 9提问于2014-12-10得票数 5
回答已采纳
6回答
我有一些HTML，如下所示：
<ul style="padding-left:12px; float:right;">
<li style="display:inline; padding-right:2px;">content</li>
<li style="display:inline; padding-right:2px;">content</li>
<li style="display:inline; padding-right:2px;">
浏览 2提问于2014-09-04得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
