CSS Grid 自动添加 ::before 元素

Question

总的来说，我是 CSS 新手，正在尝试简单的网格布局。这就是我所拥有的。

CSS

.layoutGrid {
    display: grid;
    grid-gap: 10px;
    grid-auto-rows: minMax(100px, auto);
}

.articleCard {
    display: grid;
    grid-template-rows: 100px 300px 100px;
    grid-template-areas: "article-title"
                         "article-body"
                         "article-footer";
    grid-auto-flow: row dense;
}

.articleHeader {
    grid-area: article-title;
}

.articleBody {
    grid-area: article-body;
}

.articleFooter {
    display: grid;
    grid-template-columns: 0.5fr 0.5fr;
    grid-template-areas: "articleDomain articleKeypoints";
    grid-area: article-footer;
    grid-auto-flow: row dense;
}

.articleKeypoints {
    grid-area: article-keypoints;
}

.articleDomain {
    grid-area: article-domain;
}

@media only screen and (min-width: 600px) {
    .layoutGrid {
        grid-template-columns: repeat(3, 1fr);
    }

}

@media only screen and (max-width: 600px) {

    .layoutGrid {
        grid-template-columns: repeat(1, 1fr);
    }
}

HTML

<div id="mainContent" className="container layoutGrid">
        <Card className={"articleCard"} style={{height:"500px", flex: "1 1 auto", padding: "1.25rem", boxSizing: "border-box"}}>

            <CardHeader className="articleHeader">
                <CardTitle>{props.articleDetails.Title}</CardTitle>
            </CardHeader>
            <CardBody className="articleBody">
                <CardText>{props.articleDetails.Summary}</CardText>
            </CardBody>
            <div className="row articleFooter">
                <div className="col-auto mr-auto">
                    <Button outline color="info">Read Keypoints</Button>
                </div>
                <div className="col-auto">
                    <CardSubtitle style={{verticalAlign: 'text-bottom'}}>
                        <small>{props.articleDetails.Domain}</small>
                    </CardSubtitle>
                </div>
            </div>
        </Card>
    </div>

这里没有添加 ::before 元素，但结果网格的第一个元素始终是 ::before 元素。即使是显示“读取关键点”的内部网格也有同样的问题。外部布局处于循环中，但我认为这不会影响任何事情。

谁能告诉我如何解决这个问题，以及任何关于如何改进布局整体结构的指针都将非常感激！

Answer 1

写我的评论作为答案，因为它似乎可以解决问题。

这是 bootstrap.css 它的 .container 选择器，它添加了之前和 后。如果您使用的是网格，则不应该使用该类 此处的容器（其他名称）或不使用引导程序。

Answer 2

::before 或 ::after 没有任何问题。这些是 CSS 伪元素/选择器，它们在每个选定元素的内容之前/之后插入一些东西。

这里显示它们是因为在浏览器的开发者工具中动态查看代码。

只需将其与页面的真实来源进行比较 - 右键单击​​页面并选择View page source（消息在网络浏览器中有所不同）。将出现一个空白选项卡，其中包含从服务器发送到 Web 浏览器的确切代码。