Search code examples
htmlcssalignmentmedia-queriespseudo-element

CSS vertical alignment of :before pseudo element and td content

I've got a very specific problem within a web view I am creating for mobile devices. I have a table within the webview which is re-arranged vertically for smartphone displays. For the re-arrange, I hide the table head line and take the column name as :before pseudo element from a data-label attribute on the original html element.

Now the problem is, that the pseudo element and the td content won't align vertically, even though both elements are floated opposed. I am sure that the reason is the length of the text within the td element but I don't know why.

Heres a picture of whats happening:

The alignment problem

My html is processed like this:

Processed HTML markup

The computed css code is the following:

  1. td Style

td css style

  1. :before Style

pseudo element css style

Can anybody explain to me why this is happening and what I have to change to make it function like it's supposed to?

Best regards

Solution

  • I found the solution myself...

    The problem was in fact the .cshtml razor syntax compilation.

    Since those date fields were placed within a c# if-statement I formatted the code like usual: 

    @if(startDate != DateTime.MinValue)
{
  <td class="ta-left" data-label="Start">@startDate</td>
}

    The text identiation and the line breaks for clean code here were the problem.

    The razor compiler inserted a break for those parts. The problem could be fixed using the following razor markup:

    @if(startDate != DateTime.MinValue){<td class="ta-left" data-label="Start">@startDate</td>}