git 点是如何在网站上显示的

Question

导航到网站 https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/

粘贴截图，它是一个 public 域名网站，所以我认为不会有内容版权问题

我喜欢网页上的虚线图案。我首先认为它是一个图像，但是当我无处检查元素时，我无法看到图像或任何用于显示这些点的 css 样式。虚线图案是如何实现的？

Answer 1

您无法在检查元素中看到它，因为它巧妙地放在 :before 元素状态中。

在他们的 CSS 中检查 .post__header:before，您会找到图片以及他们如何将它放在那里。

.post__header:before{
    background:url(/wp-content/themes/github-blog/dist/css/../../assets/images/dot-left-corner.png) no-repeat;
    content:none;
    height:300px;
    left:0;
    pointer-events:none;
    position:absolute;
    top:0;
    transform:translate(-125px,-152px);
    width:318px
}

同一页面中有更多元素使用此方法而不是任何直接方法。

Answer 2

您可以在 header 标签伪 class :before（CSS2 语法）

下看到它像这样检查

git 点是如何在网站上显示的

How did git dots are displayed over the website

html

web

styles

division