伪元素

浮动使元素脱离文档流并左/右排列，导致父容器高度塌陷；通过clear属性或伪元素清除浮动，解决布局问题。 浮动（float）和清除（clear）是CSS中用于控制元素在页面中排列方式的重要属性，尤其在早期网页布局中被广泛使用。虽然现代布局更多依赖Flexbox和Grid，但理解float与clear…

使用CSS渐变与透明色可提升网页视觉层次，.hero-section通过linear-gradient叠加rgba颜色值实现美观背景，配合background-size和background-position确保适配不同屏幕；在移动端通过媒体查询调整渐变角度与透明度以优化阅读体验；为保障可读性，添加…

答案：通过CSS的:hover伪类结合transition和transform实现导航菜单动画。1. 背景颜色渐变动画利用transition平滑切换背景色；2. 下划线滑入动画使用::after伪元素配合width变化实现滑入效果；3. 文字颜色渐变与缩放通过transform: scale()和…

使用CSS伪类:required和:optional可直观区分表单必填与可选字段。通过为必填项添加红色边框、背景色或星号标记，如input:required{border-left:3px solid #e74c3c}，提升视觉提示；对可选字段设置半透明或虚线边框，如input:optional{o…

::marker伪元素可用于自定义列表符号的颜色、大小及内容，支持有序和无序列表；通过color和font-size改变外观，content配合counter修改编号格式或替换符号，但仅限有限样式属性，复杂效果需结合::before实现。 使用 CSS 的 ::marker 伪元素可以轻松自定义列表…

通过CSS内外边距组合可实现等高布局，核心是利用大padding-bottom拉伸列高，配合负margin抵消溢出，并用overflow:hidden隐藏超出部分，使多列视觉等高；结合box-sizing:border-box可精确控制尺寸，避免布局错位。该方法适用于兼容老浏览器的场景，如IE8+的…

::marker是CSS伪元素，用于设置列表项前的标记样式。通过color属性可直接修改符号颜色，如li::marker { color: red; }将项目符号变为红色。支持color、content、text-shadow及部分字体属性。现代浏览器兼容良好，IE不支持。兼容性要求高时可用list…

使用CSS伪元素与选择器结合可创建轻量装饰效果。1. 通过::before和::after为元素添加波浪线、图标等视觉元素；2. 利用属性选择器为外部链接自动添加上标箭头；3. 使用:nth-child与计数器实现自定义序号列表；4. 配合:hover实现按钮悬停动画，如下划线展开。这些方法减少HT…

当输入框无内容时，::placeholder-shown 激活，结合 :focus 和 transition 可实现占位符上浮动画，如 translateY(-20px) 和缩小字体，模拟 Material Design 标签效果。 当用户在输入框中未输入内容时，::placeholder-show…

使用::after伪元素可灵活创建分割线，通过content配合定位与样式实现竖线、渐变线或装饰符号，如.item:not(:last-child)::after添加竖线，.section::after用渐变做柔和分隔，.divider::after插入圆点或Unicode字符装饰，提升视觉效果且无…