I'm trying to add a bottom border to a title thats wrapped within a div but it affects the whole block.
<div class="title">I'm a title</div>
and my CSS
.title {border-bottom: 2px solid #000; padding-bottom: 3px;}
Is the best way to apply this border to the text?
Wrapping a span around the text would be ideal. But I can't access the HTML.
<div class="title">
<span class="border">I'm a title</span>
</div>
How would I wrap the text with a span using Jquery.
I'm trying
$(".title").wrap('<span></span>');
Or is there another way to add this CSS?
Thanks
"...How would I wrap the text with a span using Jquery."
This should answer your question:
<html>
<head runat="server">
<title></title>
<style>
.border {border-bottom: 2px solid #000; padding-bottom: 3px;}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.title').each(function(index) {
$(this).html("<span class='border'>" + $(this).html() + "</span>");
});
});
</script>
</head>
<body runat="server">
<div class="title" style="text-align: center">I'm a title</div>
</body>
</html>
.title {border-bottom: 2px solid #000; padding-bottom: 3px; display: inline;}
Depending on how fancy you want to get, you could get the effect you're after by setting text-decoration:underline
(MDN)
That's not a true border per se, but if you are unable to modify html this may be your only option
.html
in jquery - uriah 2012-04-04 04:34