[英]How can I prevent the ::before pseudo element from affecting my flex layout?
我的网站上有一个 header ，它使用display: flex 。 在其中，有三个元素，标题、图像（嵌套在 div 中，以便我可以使用某种类型的 CSS 图像过滤）和垂直导航。
标题和导航有 flex: 0，而图像有 flex: 1，所以它会随着我的显示变宽而变大，正如预期的那样。
导航项有一个::before 伪元素，出现在 hover 上。 当它出现时，它会占用空间，因此当我越过导航项目时，我的图像会缩小不同的数量，这会使我的页面看起来有问题。 如何使 ::before 伪元素在出现时不会使图像缩小？ 这甚至可能吗？ 或者我是否需要切换到使用 hover 时变得可见的实际元素？
我尝试在 ::before 元素上使用绝对定位，但是当我尝试使用 left 属性移动它时，它消失了。
https://codepen.io/pen/?template=BamyEYW
header { margin-block-start: 3em; padding-bottom: 0.67rem; padding-left: 5%; padding-right: 5%; display: flex; flex-direction: row; flex-wrap: wrap; } nav { margin-left: auto; } nav ul { list-style: none; display: flex; flex-direction: column; padding-inline-start: 0; padding-left: 1em; } nav ul li { text-align: right; font-size: x-large; } nav ul li a:hover { color: red; } nav ul li.internal-nav.selected::before { content: '> '; color: rgba(0, 0, 0, 0.6); } nav ul li.internal-nav:hover::before { content: '> '; color: red; } h1 { color: rgba(0, 0, 0, 0.6); font-size: 5em; }.profile-photo3 { position: relative; flex: 1; min-width: 20rem; background-color: blue; clip-path: polygon(70% 0%, 100% 50%, 70% 100%, 0% 70%, 20% 15%); }.profile-photo3 img { width: 100%; mix-blend-mode: screen; }
<header> <h1>Page Title</h1> <div class="profile-photo3"><img src="MyPhoto.jpeg" /></div> <nav> <ul> <li class="internal-nav"><a href="#about-me">About Me</a></li> <li class="internal-nav"><a href="#experience">Experience</a></li> <li class="internal-nav"><a href="#lab">Lab</a></li> </ul> </nav> </header>
您可以更新您的伪元素，如下所示：
运行代码片段并在整页上打开它以查看更改。 你也可以在这里查看（Codepen.io）
header { margin-block-start: 3em; padding-bottom: 0.67rem; padding-left: 5%; padding-right: 5%; display: flex; flex-direction: row; flex-wrap: wrap; } nav { margin-left: auto; } nav ul { list-style: none; display: flex; flex-direction: column; padding-inline-start: 0; padding-left: 1em; } nav ul li { text-align: right; font-size: x-large; } nav ul li a:hover { color: red; } nav ul li.internal-nav a { position: relative; } nav ul li.internal-nav.selected a:before, nav ul li.internal-nav a:hover:before { content: '> '; position: absolute; left: -1rem; color: red; } nav ul li.internal-nav.selected a:before { opacity: .6; } h1 { color: rgba(0, 0, 0, 0.6); font-size: 5em; }.profile-photo3 { position: relative; flex: 1; min-width: 20rem; background-color: blue; clip-path: polygon(70% 0%, 100% 50%, 70% 100%, 0% 70%, 20% 15%); }.profile-photo3 img { width: 100%; mix-blend-mode: screen; }
<head> <script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-d0f3648046d2aaca07bd0037b9e061a26c74a8a999b75672ad6a638cca641472.js"></script> <script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-4793b73c6332f7f14a9b6bba5d5e62748e9d1bd0b5c52d7af6376f3d1c625d7e.js"></script> <script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js"></script> </head> <body> <header> <h1>Dogs:)</h1> <div class="profile-photo3"><img src="https://images.dog.ceo/breeds/collie-border/n02106166_2345.jpg"></div> <nav> <ul> <li class="internal-nav"><a href="#">About Dogs</a></li> <li class="internal-nav selected"><a href="#">My Fav Dogs</a></li> <li class="internal-nav"><a href="#">Dog Facts</a></li> </ul> </nav> </header> <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script> <script src="https://cdpn.io/cp/internal/boomboom/pen.js?key=pen.js-f2136278-4370-4b42-10b9-cde5fe228f8b" crossorigin=""></script> </body>
这里的核心问题是：
其中之一必须是 go。
我假设您想保留第一个并删除第二个。
当创建它的样式没有接合时，您不能让 a::before-element 占用空间，所以我能想到的剩余（简单）策略是：
#1 让你继续基于::before，但有点脆弱，因为它涉及字体宽度等的猜测/知识。
#2 非常健壮，仍然可以在纯 css 中完成。
#3 介于两者之间：您仍然需要获得正确的宽度，但如果您错过它只会影响标记的外观，而不是布局的 rest
鉴于导航项目不太可能改变，或者如果它们改变它们将更改为设置值，则可以设置导航的最小宽度以为::before伪元素留出足够的空间，例如min-width: 12em 。
添加一个 max-width: (建议 65rem) 到 profile-photo3 以阻止照片缩小，但最大宽度永远不会大于指定的尺寸。
如何防止伪元素或输入扩大flexbox中的flex项目？
[英]How do I prevent a pseudo-element or input from widening a flex item in a flexbox?
如何防止第一个孩子的CSS也影响HTML表中的第二个孩子？
[英]How can I prevent first-child CSS from also affecting the second child in my HTML Table?
调整窗口大小时，如何防止所有弹性项目调整大小？
[英]How can I prevent all of my flex-items from resizing when I resize my window?
防止裁剪伪:: before元素中的动画背景图像
[英]Prevent animated background image in pseudo ::before element from being cropped
如何在父元素的上方（和旁边）放置一个:: before伪元素，而不影响父元素的位置
[英]How to put a ::before pseudo-element above (and next to) the parent element without affecting the parent's position
如何在不影响其他项目的 position 的情况下在弹性列中添加元素？
[英]How can I add an element in a flex column without affecting other item's position?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.