0

I want a dotted pattern to repeat-x either side of my H1 titles.

Can this be done?

Note: Some of my H1's are placed over background images, not always on a solid colour.

Here's a screenshot of what I'm looking to do

enter image description here

akash
  • 2,117
  • 4
  • 21
  • 32
Craig Newman
  • 11
  • 2

2 Answers2

0

Here's a simple JQuery solution.

<h1 class="dots">Jasper</h1>

<script language="javascript">
var dots = '.................';
$('.dots').prepend(dots);
$('.dots').append(dots);  
</script>
Jasper Giscombe
  • 313
  • 1
  • 5
0

You can use the CSS ::before and ::after selectors.

jsFiddle: https://jsfiddle.net/4kqxj61e/

Sukrit
  • 308
  • 2
  • 12
  • This almost works! My problem is two fold. 1: The dots are a set amount and do not go all the way 100% width and 2: When I view that on mobile screen sizes the dots push some of my h1's off to the right. Is there any way to do this but have overflow hidden maybe? – Craig Newman Aug 24 '15 at 15:04
  • Can you give a screenshot of the problem or create a fiddle with your code and post it here? Thanks – Sukrit Aug 24 '15 at 15:16