我可以使用 ::before content 使 div 成为可点击的链接吗？答案

【问题标题】：Can I use ::before content to make a div a clickable link?我可以使用 ::before content 使 div 成为可点击的链接吗？
【发布时间】：2018-09-04 06:20:00
【问题描述】：

我正在处理一些 Wordpress 网站的自定义样式，并且我想让一个特定的 DIV 可点击，而不是使用其中的内容。由于网站使用的页面构建器，我发现它很困难，在我去创建一整段自定义 HTML 内容之前，我想知道我是否可以通过 CSS 或 JS 修改模块，以便网站所有者仍然可以修改内容。

例如。

.container {
	width: 100%;
  height:400px;
}

.container .module-content {
	display: block;
  height:150px;
  bottom:0;
  position: absolute;
	width:100%;
	overflow:hidden;
	transition: ease .5s;
  color:white;
  text-align:center;
}

.container:hover .module-content {
	display: block;
  height:250px;
	overflow:visible;
}

.container .module-content .module-title {
	display: block;
	font-size:30px;
  height:100px;
	padding:50px 25px 0;
  margin:0;
	background: -moz-linear-gradient(top, rgba(66,114,184,0) 0%, rgba(66,114,184,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(66,114,184,0) 0%,rgba(66,114,184,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(66,114,184,0) 0%,rgba(66,114,184,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004272b8', endColorstr='#4272b8',GradientType=0 ); /* IE6-9 */
}	

.container .module-content .module-title a {
  color:white;
  text-decoration:none;
  }

.container .module-content .module-description {
	background-color:#4272b8;
	height: 50px;
  padding:25px;
  margin:0;
  color: white;
}

<div class="container"><!-- this is a 600x400 pixel box with an image for a background -->
      <div class="module-content"><!-- this is a 100px height div positioned absolutely and at the bottom with overflow hidden, when the container is hovered, the overflow becomes visible and height is 150px -->
        <div class="module-title"><h2><a href="/about/">About</a></h2></div><!-- this heading is the current link and is always visible -->
        <div class="module-description"><p>text</p></div><!-- this text is only visible when the container is hovered -->
      </div>
     </div>

如下图所示，我只能编辑标题文本（带或不带链接）、段落文本和容器背景。内容的定位由 CSS 覆盖完成。

我想也许我可以把 H2 <a href></a> 做成一个块，这样它就覆盖了整个容器，但是它填满了“关于”文本的位置（它将它移动到顶部，我希望它出现在底部）。

所以我想也许我可以使用 content 的 ::before 或 ::after 之类的伪类来使容器 DIV 成为可点击的链接...

这可能吗？如果没有，我还能如何实现我所追求的？

【问题讨论】：

伪元素不是 DOM 的一部分，它们不可点击。

标签： javascript html css pseudo-element

【解决方案1】：

这可能吗？

如果我没记错的话，你不能提供伪类的链接

如果没有，我还能如何实现我所追求的目标？

对我来说，最简单的方法（但也许不是最好的）就是让 h2 链接的区域更大，如下所示：

https://jsfiddle.net/9j516L2g/6/

.clickable-area {
   display: inline-block;     
   position: relative;    
   z-index: 1;     
   padding-bottom: 20px;     
   margin-bottom: -20px; 
}

display: inline-block 用于设置边距
位置必须是相对的
z-index 用于将可点击区域保持在顶部（如果您在其他地方使用 z-index，请记住这一点）
填充增加了可点击的区域
负边距有助于不破坏环绕文本

上面的示例将在可点击区域增加 20px - 你可以对左右做同样的事情，所以也许这对你来说是一个很好的解决方案。

让我知道你是否可以。

【讨论】：