如何向 Div a:link 元素添加边框线
How To Add A Border-Line To A Div a:link Element
我想添加一条垂直线来分隔 #socialmediabuttons 和 .backtotop,该线没有任何 a:hover 特征,例如当光标悬停在元素上时颜色会发生变化。对于不是全宽的线条 - 大约只有 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'>© 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>
我博客的URL如下:http://www.blankesque.com
与其使用边框...使用绝对定位的伪元素。
它比边框更有风格。
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>
尝试将图像包裹在另一个 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>
您可以创建一个带有线性渐变的边框,并将线性渐变放置在右侧或左侧。
这也可以完全控制元素的高度和宽度。
.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;
;
}
<a class="icon">Text</a>
<a class="icon2">Text</a>
我想添加一条垂直线来分隔 #socialmediabuttons 和 .backtotop,该线没有任何 a:hover 特征,例如当光标悬停在元素上时颜色会发生变化。对于不是全宽的线条 - 大约只有 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'>© 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>
我博客的URL如下:http://www.blankesque.com
与其使用边框...使用绝对定位的伪元素。
它比边框更有风格。
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>
尝试将图像包裹在另一个 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>
您可以创建一个带有线性渐变的边框,并将线性渐变放置在右侧或左侧。 这也可以完全控制元素的高度和宽度。
.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;
;
}
<a class="icon">Text</a>
<a class="icon2">Text</a>