Home/ Questions/Q 7737117
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T07:54:55+00:00

I’m trying to add a bottom border to a title thats wrapped within a

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    “…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>
    • 0