前后使用 CSS 伪类答案

【问题标题】：Using CSS pseudo class before and after前后使用 CSS 伪类
【发布时间】：2011-07-22 02:30:11
【问题描述】：

所以我尝试前后试验 CSS 伪类。我尝试使用那些伪来创建标题元素。这是为了减少使用 div 来保存左右图像。这是 HTML 代码

    <header id="mastHead">
        <h1><a href="#">Branding</a></h1>
    </header>

所以我有 3 个图像来创建传统的标题元素，左侧和右侧宽度为 20 像素，高度为 100 像素，中间为 1 像素宽度和 100 像素高度，它们将水平重复。这里是我的 CSS

    #mastHead {
        background:url(images/headMiddle.jpg) repeat-x top left;
        width:1000px;
        height:100px;
        overflow:hidden;
    }

    #mastHead:before {
        content:"";
        display:block;
        background:url(images/headLeft.jpg) no-repeat top left;
        width:20px;
        height:100px;
        float:left;
    }

    #mastHead:after {
        content:"";
        display:block;
        background:url(images/headRight.jpg) no-repeat top left;
        width:20px;
        height:100px;
        float:right;
    }

    #mastHead h1 a {
        display:block;
        width:200px;
        height:41px;
        background:url(images/logo.png) no-repeat;
    }

所以问题是如果我删除 h1 元素，它会完美对齐，但如果我放置这些元素，它会将 ::after 伪类向下推，它会根据它的高度占用剩余空间。我该怎么做这个 h1 元素只占用中间空间而不影响 ::after 空间？

【问题讨论】：

它们是伪元素，不是伪类。

标签： html css pseudo-class

【解决方案1】：

我用你的例子做了一个小提琴：http://jsfiddle.net/3Dcw3/（只将宽度设置为 500 以适应小提琴并设置背景以可视化它们）

这是一个固定版本：http://jsfiddle.net/3Dcw3/1/

要点是：

在标题中添加position:relative;。
使用绝对定位而不是浮动。
添加内边距，以便块位于其上方。

【讨论】：