CSS 中::after的妙用(实现在margin中显示内容)

效果图如下:

背景: 如上图,之前只是当纯的写一个参考货架平面图,用作物料系统的在库状态可视化,当完成页面body分成10等份时,货架之间需要有通道,为了实现实际的样式,我给每个等份都添加了margin-right: 4%,然后即将上线时用户说希望这些通道标注上'通道'两个字,因为不想大改的原因我就找文心一言给我实现在margin-right中怎么添加文字,结果还真就可以,给我提供了after这个关键字,最终实现如下

html 复制代码
#gudinghuojia2F .layui-col-xs10:not(:last-child)::after {
  content: '通道'; /* 在 div 右侧添加文字 */
  position: absolute;
  top: 40%;
  font-size: xxx-large;
  left: 110%;
  color: #c9750582;
}

#gudinghuojia2F .layui-col-xs10 {margin-right: 4%;}


/*

以下是我的货架 效果图 ,        layui-row这个div分成了lay.zhong等份,
而我在这若干等份中添加了margin-right: 4%,实际是当作货架之间的通道,但是用户希望显示通道2个字,但页面都已经实现了,我就想着怎么在边框中显示文字也就是margin-right中,
最后发现使用after就能实现:
	layui-col-xs10:not(:last-child)::after{ content: '通道'; /* 在 div 右侧添加文字 */  position: absolute;}而因为最后一个货架之后是不需要添加通道的,因此我添加了not(:last-child),也就是排除了最后一个

*/

<div id="gudinghuojia2F" th:if="${cc == 'CP-2F' }" style="height: 100%;">
	<div class="layui-row" >
		<div style="font-size: xx-large; font-family: fantasy; color: #031cdd; z-index: 999;"><!--列号-->
			<div style="height:10%;"></div>
			<div th:styleappend="'height: calc(90% / '+ ${lay.lie}+')'" th:each="iii : ${#numbers.sequence(lay.lie, 1, -1)}" th:text="${iii}"></div>
		</div>
		<div class="layui-col-xs10" th:each="i : ${#numbers.sequence(lay.zhong, 1, -1)}" >
			<div class="inner-title" th:text="${lay.da + '-' + i}"></div>
			<div class="inner-div" th:each="ii : ${#numbers.sequence(lay.lie, 1, -1)}" th:id="${lay.da + '-' + i + '-1-'+ ii}" th:styleappend="'height: calc(80% / '+ ${lay.lie}+')'"></div>
		</div>
	</div>
	<div class="waitongdao"> 外通道</div>
</div>
相关推荐
前端小巷子5 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹8 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器14 分钟前
指定阿里镜像原理
前端
枷锁—sha19 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha21 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜37 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB241 小时前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss