Javascript 右上角和左下角带有css的半边框

我有一些图片，我希望在右上角和左下角各有一半边框。我遇到的问题有：

问题1:我成功地在所有四个角切割了边框，但无法切割左上角和右下角。下面的代码（我使用的是KillaCam提供的小提琴，并进行了一些实验，结果是所有四个角首先出现，然后三个角消失了！）

问题2我已经有了一个面板，其中有一个链接使用css表格方法垂直居中，在悬停时也可见。当我将面板的代码与角边框组合在一起时，我的垂直居中出现了问题！我想这是因为我对边框使用了额外的div，但我还没有成功地将使用

：before

（不适用于悬停）。下面是HTML和css，还有显示我想要制作的图像：

<ul class="img-list">
<li class="category_lists one-third column-block" '="">
<a href="http://kohphangan.smartsolutionpro.us/category/adventure/">
<img src="something.jpg"/>
 <span class="text-content">
 <span>Adventure</span>
 </span>
 </a>
</li>
<li class="category_lists one-third column-block" '="">
  <a href="http://kohphangan.smartsolutionpro.us/category/beach-2/">
<img src="something2.jpg" />
<span class="text-content">
<span>Beach</span>
</span>
</a>
</li> </ul>

以及显示我想要制作的图像：

如果我必须使用javascript，我会的，但我不是很擅长，所以依靠css来实现。非常感谢您的帮助。

这里有一个解决方案：

HTML:

问题#1的解决方案：

---

你想画的所有图像的边框大小都一样吗？@Sai，是的。宽度和高度应该是一样的。如何使用hover？我在使用之前和之后都被卡住了。我的边框在hover上。@Sai：非常感谢。

<ul class="img-list">
<li class="category_lists one-third column-block" '="">
<a href="http://kohphangan.smartsolutionpro.us/category/adventure/">
<img src="something.jpg"/>
 <span class="text-content">
 <span>Adventure</span>
 </span>
 </a>
</li>
<li class="category_lists one-third column-block" '="">
  <a href="http://kohphangan.smartsolutionpro.us/category/beach-2/">
<img src="something2.jpg" />
<span class="text-content">
<span>Beach</span>
</span>
</a>
</li> </ul>

/*css for the categories on home page*/
.img-list{margin:0;padding:0; list-style:none}
ul.img-list li {
display: inline-block;
height: 20em;
margin: 0;
position: relative;

}
.category_lists.one-third{width:33%; margin-left:0;}
.category_lists img{width:100%; height:auto;}


span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
span.text-content {
background: rgba(38,196,83,0.7);
color: white;
cursor: pointer;
display: table;
 height: 7em;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
font-size:42px;
 text-transform:uppercase;
font-family: 'Raleway', sans-serif; font-weight:300
} 
ul.img-list li:hover span.text-content {
   opacity: 1;
}

<div></div>

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 10px;
}

div {
    position: relative;
    display: table;
    width: 200px;
    height: 100px;
    background: url("http://placehold.it/200x100")
                no-repeat
                top left;
}

div:before,
div:after {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    border: solid white;
    border-width: 2px 2px 0 0;
    display: none;
}

div:before {
    right: 5px;
    top: 5px;
}

div:after {
    border-width: 0 0 2px 2px;
    bottom: 5px;
    left: 5px;
}

div:hover:after,
div:hover:before {
    display: block;
}

.div2:before, .div2:after {width:9px; height:9px; position: absolute;background:#fff; content:'';}
.div2:before {top:0; left:0;}
.div2:after {bottom:0; right:0; }