首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何删除底部伪元素之前和之后的空格?

要删除底部伪元素之前和之后的空格,可以使用CSS的伪元素选择器和属性来实现。

首先,伪元素选择器是用来在元素的内容之前或之后插入额外的内容。常见的伪元素选择器有::before::after

接下来,可以使用CSS的content属性来插入内容,并设置为一个空字符串,这样就可以删除伪元素之前和之后的内容。

最后,为了删除底部伪元素之前和之后的空格,可以使用CSS的display属性将伪元素设置为inline-blockinline,这样就可以让伪元素与其前后的内容在同一行显示,从而删除空格。

以下是一个示例代码:

代码语言:txt
复制
.element::before,
.element::after {
  content: "";
  display: inline-block;
}

在上述代码中,.element是要应用伪元素的元素选择器,::before::after是伪元素选择器,content: ""将伪元素的内容设置为空字符串,display: inline-block将伪元素设置为行内块级元素。

这样,底部伪元素之前和之后的空格就会被删除了。

请注意,这只是一种删除底部伪元素之前和之后空格的方法,具体的实现方式可能会因具体的页面结构和样式需求而有所不同。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS

E元素或F元素,EF之间用逗号分隔  DIV,p{color:#f00;}     E F      后代元素选择器,匹配所有属于E元素后代F元素,EF之间用空格分隔    #nav li{display...;color:red}     p:after  在每个元素内容之前插入内容  p:after{content:"hello";color:red} 4·类选择器: 类选择器:专用于控制链接显示效果...无论多么复杂布局,其基本出发点均是:“如何在一行显示多个div元素”。浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,标准流不是一个层次。    ...,那么A相对垂直位置不会改变,也就是说A顶部总是上一个元素底部对齐。...,因此div2相对垂直位置不变,顶部仍然div1元素底部对齐。

2K30
  • 知识点总结

    MarkDown语法 表示小黑圆点,使用-加空格 |加;表示| 1加: 表示之前之后某个地方注释(1那个地方可使用数字或单词) 1....下方引入样式 ↩ 要删除某行文字 在其前面加波浪号~~ 如下任务列表,为破折号-加[ ],若完成,则在[]中填写x,否则写空格 [x] I want to be healthy [ ] I want...子元素选择器 相邻兄弟选择器 组合选择器 选择器 选择器优先级 属性 单位 px em rem vw vh 背景 文本 字体 列表 表格 文档流 标准流 浮动流 定位流 内联元素/块状元素 盒子模型...top/bottom 对于内联元素,指的是元素顶部(底部当前行框盒子顶部(底部)对齐;即与 line-box 顶部(底部)对齐 对于 table-cell 元素,指的是元素顶 padding...text-bottom,指的是盒子底部父级内容区域底部对齐,即与 content-area 底部部对齐。

    81830

    关于 vertical-align 你应该知道一切

    top 与 bottom 对于内联元素,指的是元素顶部(底部当前行框盒子顶部(底部)对齐;即与 line-box 顶部(底部)对齐。...text-bottom,指的是盒子底部父级内容区域底部对齐,即与 content-area 底部部对齐。 例子如下: ?...vertical-align:middle,除非你自己创建一个显示内联元素或者元素。...按照之前讲解,我们可以借助空白节点,空白节点我们看不见,但是如果可以给它设置一个高度,让它与父级高度一致,就解决了这个问题。怎么给高度呢?答案是借助元素。...上面已经讲过如何解决此类问题,我们直接给父元素 line-height:0 ,这样每个虚线框中小空隙就消失了。但是可以明显看到底部有很大空隙并没有消除。

    2.7K20

    每天20个灵魂拷问系列一

    (-50%,-50%); background: #bfa } 代码解读 这里主要是关于子元素设置 首先设置绝对定位,离底部左边分别为50% 此时不加 transform是这样 盒子离底部左边分别为...CSS选择器优先级是如何定义? 解答 !...解答 真正意义上inline-block水平呈现元素间,换行显示或空格分隔情况下会有间距。...解答 行内元素设置水平方向paddingmargin有效,但是设置垂直方向无效,垂直方向设置只是一种视角效果,但实际并没有对周围元素产生任何影响。...解答 大部分容器标签都有元素,iframe没有元素; 大部分单标签都没有元素,但是img 有元素 补充 元素不能通过js操作 十六、js中有哪些数据类型 解答 int、string、boolean

    39630

    css学习笔记,持续记录。

    选择所有具有 class="center" 元素:p.center; 由以上选择器进行扩充之后 1. 群组选择器: E , F{sRules},选择所有EF元素。 2....相邻同级选择器:E+F{sRules},选择紧贴在E元素之后F元素元素E与F必须同属一个父级,“+” 左右空格无影响。 5....)、^=(指定值开头)、$=(指定值结尾)、*=(包含指定字符串)、|=(空格分割值指定值开头) 7. css动态类选择器,:visited、:hover、:link、:active 8. css结构性类选择器...21. object-fit object-fit CSS 属性指定可替换元素内容应该如何适应到其使用高度宽度确定框。...苹果手机底部安全区 苹果手机底部安全区:env()constant(),是IOS11新增特性,Webkitcss函数,用于设定安全区域与边界距离,有4个预定义变量: safe-area-inset-left

    2.7K60

    CSS

    类似身份证),class是可重复 组合选择器: E,F  多元素选择器,同时匹配所有E元素或F元素,EF之间用逗号分隔 <!...,匹配所有属于E后代F元素,EF之间用空格分隔 E>F  子元素选择器,匹配所有E元素元素F E+F  毗邻元素选择器,匹配所有紧随E元素之后同级元素F 类选择器: 专用于控制链显示效果,...元素水平方向浮动,意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动,直到它外边缘碰到包含框或另一个浮动框边框为止。 浮动元素之后元素将围绕它。...浮动元素之前元素将不会受到影响。 如果图像是右浮动,下面的文本流将环绕在它左边: ? 如果你把几个浮动元素放到一起,如果有空间的话,它们将彼此相邻。...position 属性四个值: static relative fixed absolute 元素可以使用顶部,底部,左侧右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。

    1.4K60

    CSS入门

    CSS (层叠样式表——Cascading Style Sheets,缩写为 CSS),简单说,它是用于设置布局网页计算机语言。会告知浏览器如何渲染页面元素。...冒号之前是属性,冒号之后是值。不同CSS 属性(properties) 对应不同合法值。在这个例子中,我们指定了 color 属性,它可以接受许多 颜色值(lor values)。...类选择器 : 用于向某些选择器添加特殊效果 a : hover{ } 组合选择器 后代选择器 空格 使用空格符号结合两个选择器,基于第一个选择器,匹配第二个选择器所有后代元素 .top li{ }...,示例1 [属性名]{ } 选择器效果图,示例2 标签名[属性名]{ } 选择器效果图,示例3 标签名[属性名='属性值']{ } 2.2.3 类选择器 类选择器,用于选择处于特定状态元素,例如...属性选择器:可以通过属性值选择元素 类选择器:可以指定元素某种状态,比如链接 组合选择器:可以组合基本选择器,更加精细划分如何选择 3 CSS案例-头条页面 3.1 案例效果 3.2 案例分析

    4K20

    (第一版)知识点

    1>会上网,会打字,懂得互联网是什么 2>兴趣 3>肯练习 浏览器和服务器如何信息交互? 通过浏览器如何查看请求报文响应报文?...1.后来居上原则 2.层级优先z-index 3.拼爹原则 4.加上定位之后,继承失效 类 :link 类将应用于未被访问过链接,与:visited互斥。...需要注意是在CSS定义中,同一个元素:hover必须位于:link、:visited之后才能生效,:active必须位于:hover之后才能生效。...元素区别: 与类针对特殊状态元素不同是,元素是对元素特定内容进行操作,设计元素目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通选择器无法完成工作...它控制内容实际上元素是相同,但是它本身只是基于元素抽象,并不存在于文档中,所以叫元素

    1K20

    技术|必知必会 Vim 编辑器基础命令

    你可以在文件中移动并且修改内容,剪切、复制粘贴文件一部分,同时发出命令执行更多操作(按ESC键进入命令模式) 插入模式:插入模式用于在给定文档位置插入文本(按i键进入插入模式) 我如何知道我正使用哪种...如果你正在使用插入模式,你会在编辑器底部看到INSERT。如果编辑器底部没有显示任何内容,或者在编辑器底部显示了文件名,则处于“命令模式”。...)W–跳转到下一个单词开始(单词分隔符只能是空格)b–跳转到下一个单词末尾(单词分隔符可以是空格或其他符号)B–跳转到下一个单词末尾(单词分隔符只能是空格) PgDn键–向下移动一页 PgUp...i–在光标之前插入a–在光标之后插入I–在光标所在行开头插入。当光标位于行中间时,这个键很有用A–在光标所在行末尾插入。...o–在光标所在行下面插入新行O–在光标所在行上面插入新行ea–在单词末尾插入拷贝、粘贴删除一行yy–复制一行p/P–将内容粘贴到光标之后/之前dd–删除一行dw–删除一个单词在Vim中搜索替换匹配模式

    1.3K40

    HTMLCSS 第三章

    学习目标 css作用基本语法 css控制字体 基本选择器 类选择器 行高对齐方式 css其他属性 首行缩进、字体下划线等 css概念及其作用 css全称为(Cascading Style Sheets...: 14px; } 内容 内容 一个元素可以拥有多个类名 类名类名之间用空格隔开...多类名选择器可以让我们解决更复杂一些需求 id选择器 id选择器使用方式类选择器基本一致 声明id #自定义id名字 {属性1:值1;属性2:值2;} 调用id 给对应元素添加属性 id="自定义...类选择器 类选择器可以理解为选择元素一种状态,并不是如之前直接选中元素就完事了 a:link 没有被访问时候状态 a:visited 访问之后状态 a:hover 鼠标移动上去之后状态...2em; 字体下划线删除线 text-decoration:值; 取值:underline 下划线 line-through 删除线 none 去掉多余样式 行高 行高控制是文字与文字之间上下距离

    1.1K30

    CSS基础知识巩固你前端基础

    类选择器 类选择器:类选择器元素选择器 类以冒号(:)开头,元素选择符冒号之间不能有空格类名中间也不能有空格。...:visited 向已被访问链接添加样式 :first-child 向元素添加样式,且该元素是它元素第一个子元素 :lang 向带有指定lang属性元素添加样式 元素选择器 css中常用元素如下表所示...: 元素名 说明 :first-letter 向文本第一个字母添加样式 :first-line 向文本第一行添加样式 :after 在元素之后添加内容 :before 在元素之前添加内容 css...text-decoration 给文本添加修饰效果,值有underline为添加下画线,overline添加上画线,line-through添加删除线,blink添加闪烁效果,none无如何修饰,inherit...css内边距属性,元素内边距在边框内容之间。

    2K10

    《精通CSS》第2章 添加样式

    本书《精通 CSS》之前章节: 第 1 章 基础知识 ---- 有效且结构良好文档是添加样式基础。上一章,我们一起学习了相关知识。现在是时候学习一下如何添加样式了。...本章笔者在读完之后,根据原文解构做了一些调整,主要包括选择器及其详解、层叠与特异性及继承、以及如何应用样式,最后延伸了一下性能知识。希望你看完之后能够有收获。...后代选择器 空格 s1 s2 选择器之间用空格分隔。用于选择某个元素或者某组元素后代。...2.1.2 元素 在涉入前端之初,大家一定被问到过元素区别是什么。在展开之前,我们先来看看这个问题。 类用于在页面中元素处于某个状态时,为其添加指定样式。...因为之前学习 W3C 标准CSS Pseudo-Elements Module Level 4[3]总结了一篇关于元素文章,所以这里我就不展开说了,展开的话就多了,原文书里也就一页篇幅,大家感兴趣可以到我之前文章

    1.6K40

    使用HTMLCSS编写无JavaScriptTodo应用

    他是怎样实现?简单来说:它使用预渲染HTML,CSS兄弟组合器(~),CSS计数器:checked,:target所需选择器组合。 这篇文章其余部分将会更详细介绍。...不能一次性标记所有item为已完成 不通通过按Enter键来创建项目 通过:checked类来实现显示隐藏内容 为了实现应用程序可交互,我们需要一些方法来存储修改状态,然后在CSS中做出反应。...以下是应用部分html截图 ? 个人待办事项如下所示: ? 我们来看看如何实现删除功能。...但更重要是,此时该元素已经匹配了类:target。 <!...之前有尝试过,但是CSS计数器不计算被隐藏元素,所以当筛选出已完成item时(因为所有未完成项目都不可见),会看到未完成item总数量值为0。

    3.7K70

    Web前端面试题目及答案汇总

    当浏览器解析到该元素时,会暂停其他资源下载处理,直到将该资源加载、编译、执行完毕,图片框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。...3、如何消除一个数组里面重复元素? ? 4、想实现一个对页面某个节点拖曳?如何做?(使用原生JS)。 5、在Javascript中什么是数组?如何数组转化为标准数组?...因此sessionStorage不是一种持久化本地存储,仅仅是会话级别的存储。而localStorage用于持久化本地存储,除非主动删除数据,否则数据是永远不会过期。...(2)所有小于”基准”元素,都移到”基准”左边;所有大于”基准”元素,都移到”基准”右边。 (3)对”基准”左边右边两个子集,不断重复第一步第二步,直到所有子集只剩下一个元素为止。...10、写一个function,清除字符串前后空格。(兼容所有浏览器) ? 其他 1、一次完整HTTP事务是怎样一个过程? 基本流程: a. 域名解析 b. 发起TCP3次握手 c.

    5.6K20

    使用HTMLCSS编写无JavaScriptTodo应用

    image.png 他是怎样实现?简单来说:它使用预渲染HTML,CSS兄弟组合器(~),CSS计数器:checked,:target所需选择器组合。...不能一次性标记所有item为已完成 不通通过按Enter键来创建项目 通过:checked类来实现显示隐藏内容 为了实现应用程序可交互,我们需要一些方法来存储修改状态,然后在CSS中做出反应。...以下是应用部分html截图 image.png 个人待办事项如下所示: image.png 我们来看看如何实现删除功能。...但更重要是,此时该元素已经匹配了类:target。 <!...之前有尝试过,但是CSS计数器不计算被隐藏元素,所以当筛选出已完成item时(因为所有未完成项目都不可见),会看到未完成item总数量值为0。

    2.9K20

    浅谈JavaScript如何操作html DOMJavaScript 能够改变页面中所有 HTML 元素改变 HTML 样式** JavaScript 有能力对 HTML 事件做出反应**添加删除

    JavaScript 能够改变页面中所有 HTML 元素 首先,我们要知道如何查找HTML元素,通常有三种方法: id tag classs 就是分别通过id,tag,class名字查找HTML...document.getElementById("demo").innerHTML=Date(); } 添加删除节点...); 删除已有的 HTML 元素 如需删除 HTML 元素,您必须首先获得该元素元素: var child=document.getElementById("p1"); child.parentNode.removeChild...(child); 总结 在我们 JavaScript 教程 HTML DOM 部分,您已经学到了: 如何改变 HTML 元素内容 (innerHTML) 如何改变 HTML 元素样式 (CSS)...如何对 HTML DOM 事件作出反应 如何添加或删除 HTML 元素

    5.8K10

    带有CSS3动画3D条形图

    挑战2 - 图表持有者 图表持有人应该 用三维轴三面(背景,底部,左) 独立于后台 适应条数及其属性(高度,宽度等) 从外面有XY轴标签 我们需要什么: 1个无序列表 X轴标签每个列表项中1个元素...我们使用:before类生成这个元素; 我们将在本教程中使用:之前之后类很多。...借助:之前之后:我们可以保持我们HTML很干净。 那么,我们完成了图表所有样式设置,但是我们没有设置一些重要变量 - 尺寸,颜色条形填充值!我们说我们图表是可定制,对吗?...所以,我们已经使用了 transform:skew()transform:rotate()为了转换我们元素,使它们一起产生一个3D对象错觉 :之前之后类生成与CSS元素,并保持我们HTML...标记相对干净 :nth-last-child():不是用于定位特定列表项类,并避免向标记中添加额外类/ ID 线性渐变连同background-position一起部分填充背景元素 rgba()

    85980

    CSS基础(三):选择器

    p { font-size:14px; } h1 { color:#F00; } 复合选择器, 由两个选择器直接构成,第一个必须是元素选择器,第二个必须是类选择器ID选择器,这两个选择器之间不能有空格...通用选择器 像通配符作用,可以匹配所有元素,由*表示,对页面上所有的元素应用样式。例如删除每个元素上默认浏览器内边距外边距。但是使用*这种方式加载很慢,不建议使用。...相邻同胞选择器,定位同一个父元素下某个元素之后元素。 h2 + p {font-size:18px;} 属性选择器,根据某个元素属性是否存在或属性值来寻找元素。...id数量总和; 第三个数字(c)是用在该选择器上其它属性选择器总和。...这里包括class (.example) 属性选择器(比如 li[id=red]); 第四个数字(d)计算元素(就像table、p、div等等)元素(就像:first-line等); 通用选择器(

    49910
    领券