:before 和 :after 在元素内容前后加指定内容

最新推荐文章于 2023-08-07 22:05:49 发布
最新推荐文章于 2023-08-07 22:05:49 发布
阅读量616 收藏 1
点赞数
文章标签： css3 html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38673922/article/details/122255288
版权

效果图

在这里插入图片描述

二、背景图

在这里插入图片描述

三、完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.wrap {
				background-image: url(./backgroundImage.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-moz-background-size: 100% 100%;
				height: 100vh;
			}
			.panel {
			    position: relative;
				width:35vh;
			    height: 20vh;
			    border: 1px solid rgba(25, 186, 139, 0.17);
			    padding: 0 15px 40px;
				left:20px;
				top:20px;
			}
			/* 在 bl 元素的内容之前插入新内容： */
			.bl::before {
			    position: absolute;
			    top: 0;
			    content: "";
			    left: 0;
			    height: 10px;
			    width: 10px;
			    border-top: 2px solid #02a6b5;
			    border-left: 2px solid #02a6b5;
			}
			/* 在bl 元素的内容之后插入新的内容 */
			.bl::after {
			    position: absolute;
			    top: 0;
			    content: "";
			    right: 0;
			    height: 10px;
			    width: 10px;
			    border-top: 2px solid #02a6b5;
			    border-right: 2px solid #02a6b5;
			}
			.footer::before {
			    position: absolute;
			    top: 0;
			    content: "";
			    left: 0;
			    height: 10px;
			    width: 10px;
			    border-bottom: 2px solid #02a6b5;
			    border-left: 2px solid #02a6b5;
			}
			.footer::after {
			    position: absolute;
			    top: 0;
			    content: "";
			    right: 0;
			    height: 10px;
			    width: 10px;
			    border-bottom: 2px solid #02a6b5;
			    border-right: 2px solid #02a6b5;
			}
			.footer {
			    position: absolute;
			    bottom: 0;
			    left: 0;
			    height: 10px;
			    width: 100%;
			}
	</style>
	<body>
		<div class="wrap">
			<div class="panel bl">
			  <div style="position: relative; width: 414px; height: 250px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"></div>
			  <div class="footer"></div>
			</div>
		</div>
	</body>
</html>
Zh.冠军
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html中after后面添加文字,使用CSS3伪类元素（::before|::after）对文字进行美化
weixin_42378094的博客
06-17 1936
如果要想把一个文字的分成两半分别设置成不同的颜色，你是不是第一时间只想到通过PS来实现呢，不过有一个不好的地方就是图片会占用更多的资源。所以下面就给大家介绍一个通过CSS的伪类元素来美化文字的方法。对一个文字进行美化左右型美化HTML代码CSS3伪类元素(::before|::after),文字进行美化库CSS代码*{padding: 0;margin: 0}span{position: rela...
对input使用伪类(::after,::before)不显示的解决方法
热门推荐
qq_40128591的博客
11-04 1万+
有时候我们想弄一个多选框或者单选框，但是又不想使用input自带的样式，如下： 首先我想到的是给input添加伪类元素(::before) .cont_list_item .item_check::before{ content:" "; display:block; border:1px #449FDB solid; border-radius:50%; position:absolute;top:0;left:0; width:15px;he
当input框在输入的时候，添加一个边框样式
qq_58143857的博客
06-17 2055
html，input
input输入框对伪类（after，before）支持情况
Young的博客
09-07 1万+
input 对伪元素(:before :after)的支持情况 伪类是个很便捷的元素，今天写东西的时候，突然发现没效果，后来发现input对伪类也有不支持的，记录一下。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...
CSS技巧（一）——before、after
coldriversnow的专栏
03-04 1442
1实现带三角边框 效果 右 左 上 下 实现代码 <div class="cssTest-right"></div> <div class="cssTest-left"></div> <div class="cssTest-top"></div> <div class="cssTest-bottom"></div> .mainbox .panel { positio..
Table组件优雅的给空内容添加 “--“ 值
weixin_44052136的博客
08-12 1768
前言：本文记录作者在项目中使用到Ant DesignUI的table组件能所遇到的小问题，故此把自己所遇到的坑及问题详细的记录下来。如果觉得作者写的不错，希望得到您的点赞/收藏/支持，如果有不同意见，欢迎下方评论区留言。 一、开始所处理的办法 1、配置 自定义的文本内容~~~如下图 const columns = [ { title: "Name", dataIndex: "name", render: (text) => <a href="#">{text}
CSS中的before和:after伪元素使用详解
09-25
在CSS中，`:before` 和 `:after` 伪元素是用于向元素的内容区添加内容的特殊工具。它们并不是真正的HTML元素，而是由CSS创建的虚拟元素，可以在元素的正常内容之前或之后插入额外的非文本内容，如图标、分隔符等。这...
CSS中灵活使用:before和:after
12-10
在CSS中，`:before` 和 `:after` 是两种伪元素，它们允许我们在元素内容的前面或后面添加额外的非实际DOM内容。这两个选择器在创建装饰性元素、补充信息或者构建复杂的布局时非常有用。 `:before` 伪元素会在元素...
jquery 追加元素append、prepend、before、after用法与区别分析
11-29
总结起来，这些jQuery方法提供了丰富的DOM操作功能，能够方便地在现有元素前后插入新内容，无论是文本、HTML片段还是整个元素。理解并熟练运用这些方法对于优化前端开发效率至关重要，尤其是在处理动态数据和构建...
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
10-23
最后，通过jQuery的`$(document).ready()`函数来初始化`beforeAfter`插件，指定图片路径（`imagePath`参数）并应用到相应的元素上。例如： ```javascript $(function() { $('#container3').beforeAfter({imagePath...
第03课：CSS基本样式和元素选择器_javascript_Body_
10-02
伪元素如`::before` 和 `::after` 可以在元素前后插入内容。 6. 组合选择器：可以组合使用以上各种选择器，以更精确地选择元素。例如，`h1 + p {margin-top: 20px;}` 会选择紧接在`<h1>`元素后的第一个`<p>`元素，...
jQuery使用after()方法在元素后面添加多项内容的方法
10-24
主要介绍了jQuery使用after()方法在元素后面添加多项内容的方法,实例分析了jQuery中after方法的功能及在元素后面添加内容的技巧,非常具有实用价值,需要的朋友可以参考下
CSS - 基于before及after伪元素添加字符
牧码的博客
02-11 9342
前言 就像在电视剧《迷离时空》（The Twilight Zone）中遗失的一集一样，CSS提供的新属性赋予了使用者在内容中添加伪标记的能力。可能听起来会有点奇怪，但这种方法却有着众多的应用场景。例如一个场景是，需要在显示的时候把文本内容放进引号之中，但是同时不想在内容或者主题文件中添加这些引号，显然这样是比较明智的做法。或者你也想通过标签和@标记尝试时下流行的Twitter，例如想要在内容之前......
python 列表 头部 尾部 添加元素
whatday的专栏
10-17 5154
往头部添加元素 list.insert(index,new_element) index 为新元素的插入位置，当index=0时，往头部添加新元素。 new_element 为要插入的元素。 例子： names.insert(0,'Bill') 往尾部添加元素 list.append(new_element) 例子： names.append('Bill') ...
CSS设计的美丽之居中、:before()、:after()的使用（小作品）
但愿人长久 千里共婵娟
05-17 4957
box居中定位、以及:before()、:after()的使用。
如何将页脚固定在页面底部
weixin_34319999的博客
02-09 504
作为一个Web的前端攻城师，在制作页面效果时肯定有碰到下面这种现象：当一个HTML页面中含有较少的内容时，Web页面的“footer”部分 随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，让你的页面看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见。那么如何将Web页 面的“footer”部分永远固定在页面的底部呢？注意了这里所说的是页脚footer永远固定在页面的底部，而不是永远...
用CSS3伪类为文字两边添加横线
今年第一次改BUG
08-06 864
wxml： <!-- 我是有底线的 --> <view class="footer">上面已经是您所在的社区所有的商家了哦</view> wxss： /* 我是有底线的 */ .footer { width: 100%; padding: 40rpx 0; text-align: center; color: #CCCCCC; font-size: 20rpx; } .footer:before, .footer:after...
如何使用伪元素::before和::after?
最新发布
金木编程
08-07 693
伪元素(::before和::after)是CSS中非常有用的特性，它们允许你在元素的内容之前或之后插入额外的内容，并且不需要在HTML结构中添加额外的标记。你可以为伪元素设置宽度、高度、背景颜色、边框等样式。请注意，伪元素只能用于具有content属性的元素，因为伪元素实际上是在元素内容之前或之后插入的额外内容。伪元素的默认定位是相对于其父元素的，它会出现在内容的前面或后面。伪元素必须配合content属性使用，即使你不想在伪元素中显示任何文本内容，也需要指定一个空内容，否则伪元素将不会被显示。
css伪元素选择器before 和 after 的使用
tsw529的博客
02-07 5353
css3伪元素选择器before 和 after 的使用 前言:最近收集了一些关于before 和 after 的使用，汇总了一下，不全面，但是，希望便于以后自己查看。 :before 的作用:在子元素的最前面, 添加一个伪元素, 伪元素内容通过 content 控制,可以在content属性中写入文本内容，但是通常为空字符串。 :after 的作用: 在子元素的最后面, 添加一个伪元素, 伪元素...
*, *::after, *::before
07-27
回答: 在CSS中，通配符选择器(*)表示匹配所有元素。而在CSS中，使用伪元素(::before和::after)可以在元素的内容前后插入额外的内容。\[1\]\[2\]在给定的引用中，*::after和*::before是用来装饰元素的伪元素选择器。\[1\]\[2\]这些伪元素可以在元素的内容前后插入指定的内容，从而实现一些特殊的效果。而在引用\[3\]中，h3::before和h3::after是用来装饰标题的伪元素选择器。\[3\]这些伪元素可以在h3标题的内容前后插入引号，从而给标题添加装饰效果。 #### 引用[.reference_title] - *1* *3* [::before和::after是什么?](https://blog.csdn.net/lb6514052/article/details/123171332)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [::after和::before的理解和使用](https://blog.csdn.net/qq_40036736/article/details/91348760)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值