我可以使用:: before内容使div成为可点击的链接吗？

Question

我正在研究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成为可点击的链接...

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

Answer 1

  

这可能吗？

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

  

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

对我来说，简单的方法（但可能不是最好的）将使h2链接的区域变大，如下所示：

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

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

• 显示：行内块用于设置边距
• 位置必须是相对的
• z-index用于将可点击区域放在顶部（如果在其他地方使用z-index，请记住它）
• 填充增加了可点击的区域
• 负边距有助于避免破坏替代文本

上面的示例在可点击区域将提供20px的更多内容-您可以左右操作相同，因此也许对您来说是个好解决方案。

让我知道您是否还可以。