1

I need it to be without ::before and ::after since those aren't supported in emails. I'm aiming for this: enter image description here

The tittle text is taken from a database so the lines must adjust to the text length.

I tried this with setting up images but there is no real way of controlling their length and I also tried with blank elements with borders but then the line goes either above or below the text not center.

What I currently got:

<tr valign="bottom">
    <td>
        <img border="0" vspace="0" height="1" width="40" 
        src="link to a picture of a white pixel" valign="MIDDLE">
    </td>
    <td class="subrubr" nowrap="nowrap" valign="bottom">
        <a name="finnews"></a>
        Title goes here
    </td>
    <td>
        <img border="0" vspace="0" height="1" width="40" 
        src="link to a picture of a white pixel">
    </td>
</tr>

What's the best way to do this?

EDIT: I'm looking for a solution that works with emails so this post is not a really helpful!

hijimbob
  • 23
  • 5
  • I found a similar question asked before, check [this](https://stackoverflow.com/questions/5214127/css-technique-for-a-horizontal-line-with-words-in-the-middle) out for more info. – kipteam Aug 25 '22 at 07:32
  • 1
    Remember that images are often turned off in email clients so using a 'dummy' image method wont work. – A Haworth Aug 25 '22 at 07:52

2 Answers2

2

Wrap the text in a div with display of flex then use two div elements with flex-grow set to 1. Use transform:translateY to move the line up to the middle like this:

<tr valign="bottom">
    <td>
        <img border="0" vspace="0" height="1" width="40" 
        src="link to a picture of a white pixel" valign="MIDDLE">
    </td>
    <td class="subrubr" nowrap="nowrap" valign="bottom"><div style='display:flex; width:100%'><div style='postion:relative; transform:translateY(-50%);border-bottom:2px solid brown;height:1rem;flex-grow:1;margin-right:1rem;'></div>
        <a name="finnews"></a>
        Title goes here
      <div style='postion:relative; transform:translateY(-50%);border-bottom:2px solid brown;height:1rem;flex-grow:1; margin-left:1rem;'>
      </div>
    </td>
    <td>
        <img border="0" vspace="0" height="1" width="40" 
        src="link to a picture of a white pixel">
    </td>
</tr>

Codepen here

Adam
  • 5,495
  • 2
  • 7
  • 24
  • Do all the email clients you are interested in support flex? See https://www.caniemail.com/search/?s=flex Also images are often turned off in email clients unless explicitly set. – A Haworth Aug 25 '22 at 08:20
  • My idea is to remove the td tags with in them but yes flex would seem like an issue. – hijimbob Aug 25 '22 at 08:33
  • I've added a version that doesn't use flexbox in this link. https://codepen.io/adamuk73/pen/GRxaoBm Basically use a full width div that uses position:absolute and a z-index of -1 to position it behind the text. I've wrapped the text in a div with a background colour to hide the line behind it. – Adam Aug 25 '22 at 10:47
  • The downside with that is that you need to know the background colour of the email and set the div containing the text to the same as that. So not 100% ideal. – Adam Aug 25 '22 at 10:54
0

Here's a quite simple way, using an hr (horizontal rule) tag for the lines, and a heading h2 for the text. The background color of the heading h2 gives the illusion that there are two lines. Its width sets the "margins," and will shape dynamically to different text phrases.

Of course the background color for the h2 must be the same as the page color. The horizontal rule can also be adjusted for thickness (height) and color.

hr {
  border: 0;
  width: 50vw;
  height: 0.1rem;
  background: red;
  margin-top: 1.5em;
  margin-bottom: -1.2em;
}

h2 {
margin: 0 auto;
background-color: white;
width: 6em;
}

#content {
  background-color: white;
  text-align: center;
  margin: 0 auto;
  padding: 1em;
}
<div id="content">
   Some text happened.
    
<hr>

<h2> A Heading </h2>

</div>

Edit:

If you want to do it with tables, one way is to give a background color to the table cells on either side of the title text cell. The cells on each side become the lines, with thickness adjustable using an invisible (same color as page background) border.

Both these methods are dynamic, so will require some modification of styling for various screen widths.

table {
  width: 70vw;
  margin: 0 auto;
  margin-top: 2em;
  text-align: center;
}

td.title {
 width: 25%;
 font-weight: bold;
 font-size: 1.3rem;
 white-space: nowrap;
 font-family: "Aboreto", sans-serif;
 color: red;
}

td.line {
  width: 35%;
  background-color: red;
  border: 0.75em solid white;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Aboreto">
<table>

<tr valign="bottom">
    <td class="line">
    </td>
    <td class="title">
    Title Goes Here
    </td>
    <td class="line">
    </td>
</tr>

</table>
Bman70
  • 743
  • 5
  • 11