Question

我想添加一条垂直线来分隔#socialmediabuttons和.backtotop，其中的行没有任何a：悬停特征，例如当光标悬停在元素上时颜色会发生变化。并且线条不是全宽 - 大约只有10px高度。我尝试了以下css编码来实现我想要的效果，但是线路太长了。我希望它从两端分离而不仅仅是顶部。

.backtotop {
border-left: 1px solid #333333;
}

我已经包含了关于上述问题的完整html和css编码：

<style>
.copyright {
height: 40px!important;
background: #f8f8f8;
padding: 0.5% 0 0 2%;
font-weight: normal!important;
letter-spacing: 0.09em;
overflow: hidden;
font-family: karla, helvetica!important;
font-size: 9px!important;
color: #333333!important;
text-transform: uppercase!important;
line-height: 35px;
margin-bottom: -40px;
}
.copyright a {
font-weight: normal;
font-size: 9px!important;
}
#socialmediabuttons {
display: block;
float: right;
padding: 0.7% 4.5% 0 0;
}
#socialmediabuttons a {
padding: 0px 5px;
}
#socialmediabuttons a:hover {
opacity: 0.6;
filter: alpha(opacity=60);
}
.backtotop {
position: absolute;
margin: 0;
right: 10px;
bottom: -5px;
text-transform: uppercase;
letter-spacing: 0.9em;
font-weight: normal!important;
font-family: helvetica;
color: #333333;
font-size: 9px;
}
.backtotop a:hover {
bottom: -5px;
margin: 0;
right: 10px;
opacity: 0.6;
filter: alpha(opacity=60);
}
</style>

<h3 class='copyright'>&#169;  2015 Blankesque . All rights reserved . <a href='http://www.blankesque.com/p/terms-and-conditions.html'>Terms Of Use</a>

<div id="socialmediabuttons"> 

<a href='https://www.pinterest.com/blankesque' target='_blank'><img height="20px" width="20px" src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/91F98FB1-242C-428E-A472-50F7D511C38E_zpsaiuhz6yb.gif'/>
</a>
<a href='https://www.twitter.com/itsblankesque' target='_blank'><img height="20px" width= "20px" src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/923FF7F8-5AA7-4676-935F-2CB5FF465122_zpsmctqg100.gif'/></a>

<a href='http://www.bloglovin.com/people/aladyinwhite-8315551' target='_blank'><img  height="20px" width= "20px" src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/8182F846-906A-4E7A-91D5-459CA791900D_zpsrssxgpbz.gif'/></a>

<a href='https://Instagram.com/itsblankesque' target='_blank'><img height='20px' width='20px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/C6567CDB-FB01-4F2D-A2FD-D0D875A30B80_zps5mgdqong.gif'/></a>

<a href='mailto: blankesque@hotmail.com' target='_blank'><img height="20px" width= "20px" src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/55416E3D-525A-499B-8E7F-BEA34ED80146_zpss1svraqx.gif'/></a>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
var offset = 300; 
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.backtotop').fadeIn(duration);
 } else {
jQuery('.backtotop').fadeOut(duration);
}
});
jQuery('.backtotop').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>

<a href="#" class="backtotop"><img  src="http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/C7FFCDAA-9694-451B-89B4-3B0BF8FC8BE9_zpsi7rqccwe.gif" width='25px' height='25px' alt="Back To Top" /></a>
  </div></h3><div><br/></div><div><br/></div>

我博客的网址如下：http://www.blankesque.com

Answer 1

而不是使用边框...使用绝对定位的伪元素。

它比边框更具风格。

a {
  padding: .25em;
  background: rgba(0, 0, 0, 0.15);
  position: relative;
}
a:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  height: 10px;
  margin-top: -5px;
  width: 2px;
  background: red;
}

<a href="#">Some Text</a>

Answer 2

尝试将图像包装在另一个div中并在该div块上应用边框，稍微修改下面的代码

.backtotop {
    position: relative;
    /* margin: 0; */
    /* right: 10px; */
    bottom: 3px;
    /* text-transform: uppercase; */
    /* letter-spacing: 0.9em; */
    /* font-weight: normal!important; */
    /* font-family: helvetica; */
    /* border-left: 1px black solid; */
    /* vertical-align: middle; */
    /* color: #333333; */
    /* font-size: 9px; */
}

.divbacktotop {
    border-left: 1px solid black;
    position: absolute;
    margin: 0;
    right: 10px;
    bottom: 12px;
    height: 20px;
}

<div class="divbacktotop">
	<a class="backtotop" href="#" style="display: block;"><img alt="Back To Top" height="25px" src="http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/C7FFCDAA-9694-451B-89B4-3B0BF8FC8BE9_zpsi7rqccwe.gif" width="25px">
	</a>
</div>

Answer 3

您可以使用线性渐变创建一个bordfer，并将线性渐变定位到右侧或左侧。这也可以完全控制元素的高度和宽度。

＆＃13;

.icon {
  background-color: #222;
  color: white;
  font-size: 8rem;
  padding: 0 0.5em;
  background-image: linear-gradient(to right, red, red 5px);
  background-size: 5px 50%;
  background-position: right;
  background-repeat: no-repeat;
  ;
}
.icon2 {
  background-color: #222;
  color: white;
  font-size: 8rem;
  padding: 0 0.5em;
  background-image: linear-gradient(to right, red, red 5px);
  background-size: 5px 1em;
  background-position: right;
  background-repeat: no-repeat;
  ;
}

＆＃13;

<a class="icon">Text</a>
<a class="icon2">Text</a>

＆＃13;

如何将边框线添加到Div a：link元素

3 个答案: