CSS 网格自动添加一个 ::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 元素。即使是 "Read Keypoints" 的内部网格也有同样的问题。外部布局是循环的，但我认为这不会影响任何东西。

任何人都可以告诉我如何解决这个问题，以及任何有关如何改进布局整体结构的指示，我们将不胜感激！

Answer 1

::before或::after都没有问题。这些是 CSS 伪 elements/selectors 插入内容 before/after 每个 selected 元素的内容。

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

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

Answer 2

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

That's bootstrap.css its .container selector that adds the before and after. If you're using grid you should either not user the class container here (some other name) or not use bootstrap.

CSS 网格自动添加一个 ::before 元素

CSS Grid automatically adding a ::before element

html

css

reactjs

css-grid