小编Tem*_*fif的帖子
如何通过 CSS 在文本后面添加突出显示，使其看起来像下面的 Instagram-one？
我对 CSS\HTML 很陌生。我如何通过 CSS 做同样的事情：
我试过这个：
.works_title {
display: inline;
padding: 3px;
font-size: 28px;
font-weight: 700;
color: aliceblue;
background-color: #000;
border-radius: 4px;
}
body {
max-width:300px;
}<div class="works_title">Something long, like a title with bunch of letters</div>但它看起来不像在 Instagram 故事编辑器中的样子。我在网络中需要这样的东西。谢谢！
推荐指数
解决办法
查看次数
如果存在 2 个元素则应用 CSS
给定以下 HTML 标记，我只想仅在存在2个相同元素时（而不是存在 1 个时）应用 (S)CSS 。
我不想使用 JavaScript 来计算元素数量并应用另一个类，但是，我觉得这是唯一的方法。
div {
a + a {
// I want to apply styles to both a tags, not just the second one
// WHEN 2 a tags exists
}
}
div {
a + a {
// I want to apply styles to both a tags, not just the second one
// WHEN 2 a tags exists
}
}
推荐指数
解决办法
查看次数
如何垂直对齐旋转的图像标题？
我正在尝试将图像标题对齐到图像容器的左下角。
这是期望结果的图片。
这是我正在使用的 HTML/CSS：
.elementor-image figure {
position: relative;
}
.elementor-image figure figcaption {
position: absolute;
bottom: 0;
left: -40px;
transform: rotate(-90deg);
}<div class="elementor-image">
<figure class="wp-caption">
<img src="https://picsum.photos/200/300">
<figcaption class="widget-image-caption wp-caption-text">The Lorem <span></span></figcaption>
</figure>
</div>我的代码有两个问题：
- 旋转的文本不是从左下角开始。
- 应用 left: -40px 并不总是将文本与图像对齐（有时它会重叠在图像顶部）。
这是说明问题的另一个屏幕截图。
我希望我已经正确地解释了自己，我一直在为此苦恼，所以我非常感谢您的意见和想法。谢谢！
推荐指数
解决办法
查看次数
第一个元素和页面顶部之间的间隙
我有以下代码：
body {
height: 100vh;
margin: 0px;
margin-top: 0px;
flex-direction: column;
background-color: rgb(41, 11, 22);
}
nav {
color: white;
background-color: rgb(214, 50, 50);
height: 10vh;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Navbar Animations</title>
</head>
<body>
<nav>
<p>This is a test</p>
</nav>
</body>
</html>但最终的结果是这样的：
问题是：我如何消除顶部的差距？
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
背景颜色在css中没有变化
:hover不起作用.div悬停时背景不会改变a
码:
a:hover div {
background-color: yellow;
}<a href="#">b</a>
<div>c</div>推荐指数
解决办法
查看次数
如何在输入上添加线性悬停效果？
我试图在我的输入按钮上添加线性效果.当用户将鼠标悬停在按钮上时,我希望底部边框线从中心开始,然后同时向右和向左移动.因此,当用户将鼠标悬停在其上时,该线从中心扩展到角落.
我设法添加了一个悬停线,但它不能按我的意愿工作.我环顾四周,我只能找到有关标题或标签的问题,而不是按钮.
#btn {
margin: 10px;
padding: 20px;
width: 470px;
height: 50px;
border: 2px solid #f7f7f7;
text-align: center;
text-transform: uppercase;
position: relative;
}
#btn:hover {
cursor: pointer;
border-bottom: 2px solid red;
transition: 0.3s;
}<input id="btn" type="submit" name="" value="Click">推荐指数
解决办法
查看次数
为什么在 grid-template-columns 中显示 100% 的网格会脱离主体？
.parent {
position:fixed;
width:100%;
left:0;
top:14px;
display:grid;
grid-template-columns:40% 60%;
grid-gap:5px;
background:#eee;
}
.left {
border:2px solid red;
}
.right {
border:2px solid red;
}<div class='parent'>
<div class='left'>LEFT</div>
<div class='right'>RIGHT</div>
</div>如果位置不是，fixed则没有问题，但如果位置是fixed-parent则右侧不完全可见。
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
如何在输入元素上创建具有不同颜色和宽度/高度的重叠边框？
我目前正在使用vue.js拖放Web应用程序。在此应用程序中，我们在输入HTML元素上具有一些特殊设计的边框。
设计看起来像这样：（忽略灰色垂直线。这是动态绘制的）
我尝试过类似创建同级div的操作，使它比输入大一点，在输入后面设置z-index并设置颜色。但是问题在于，浅蓝色的右边界和左边界将始终占据高度的100％。我需要大约75％或80％的东西。
“重叠”边框也可以在元素的顶部，右侧或左侧
有谁知道解决此问题的最佳方法？
推荐指数
解决办法
查看次数