Skip to main content
adicionou 25 caracteres ao conteúdo
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261
.signal td:after {
  content:attr(data-signal);
  display:block;
  position:absolute;
  z-index:1;
  transform:translate(-50%);
  left:100%;
  top:0;
  color:#eef825;
  text-shadow:0 0 2px #169;
}

.signal td,
.signal td:after {
  font-family:Arial,Helvetica,sans-serif;
  font-size:20px;25px;
  font-weight:bold;
  padding:10px;12px;
}

.signal td {
  position:relative;
  background:#29B9C8;
  color:#fff;
}

.signal {
  border-collapse: separate;
  border-spacing:1px;
}
<table class="signal">
  <tr>
    <td data-signal="+">NF-e</td>
    <td data-signal="+">CT-e</td>
    <td data-signal="=">MDF-e</td>
    <td>...</td>
</table>
.signal td:after {
  content:attr(data-signal);
  display:block;
  position:absolute;
  z-index:1;
  transform:translate(-50%);
  left:100%;
  top:0;
  color:#eef825;
  
}

.signal td,
.signal td:after {
  font-family:Arial,Helvetica,sans-serif;
  font-size:20px;
  font-weight:bold;
  padding:10px;
}

.signal td {
  position:relative;
  background:#29B9C8;
  color:#fff;
}

.signal {
  border-collapse: separate;
  border-spacing:1px;
}
<table class="signal">
  <tr>
    <td data-signal="+">NF-e</td>
    <td data-signal="+">CT-e</td>
    <td data-signal="=">MDF-e</td>
    <td>...</td>
</table>
.signal td:after {
  content:attr(data-signal);
  display:block;
  position:absolute;
  z-index:1;
  transform:translate(-50%);
  left:100%;
  top:0;
  color:#eef825;
  text-shadow:0 0 2px #169;
}

.signal td,
.signal td:after {
  font-family:Arial,Helvetica,sans-serif;
  font-size:25px;
  font-weight:bold;
  padding:12px;
}

.signal td {
  position:relative;
  background:#29B9C8;
  color:#fff;
}

.signal {
  border-collapse: separate;
  border-spacing:1px;
}
<table class="signal">
  <tr>
    <td data-signal="+">NF-e</td>
    <td data-signal="+">CT-e</td>
    <td data-signal="=">MDF-e</td>
    <td>...</td>
</table>
adicionou 492 caracteres ao conteúdo
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261
<table>
  <tr class="signal"><tr>
    <td data-signal="+">NF-e</td>
    <td data-signal="+">CT-e</td>
    <td data-signal="=">MDF-e</td>
    <td>...</td>
</table>
td {
  position: relative;        /* para podermos usar absolute no :after */
}

td:after {
  content:attr(data-signal); /* para pegar do HTML o sinal direto do HTML     */
  position: */absolute;
  z-index:1;                 /* para que o sinal fique sobre o resto  */
  left:100%;                 /* alinhando com o canto direito         */
  top:0;                     /* e superior da célula atual            */
  transform:translate(-50%); /* arrumando entre uma célula e outra    */
  ...                        /* aqui vocêe acertadetalhe o posicionamentoque mais precisar.        */
}

Se preferir compatibilidade com navegadores mais velhos, pode omitir os data-attributes e simplesmente usar class="mais", class="igual" nos tds e no CSS acrescentar isto:

.mais  {content:"+"}
.igual {content:"="}

só que neste caso, precisa definir uma entrana no CSS para cada símbolo utilizado.

Note que boa parte do CSS aqui exposto é para estilização, as partes essenciais da técnica mencionada já foram descritas acima.

.signal td:after {
  content:attr(data-signal);
  display:block;
  position:absolute;
  z-index:1;
  transform:translate(-50%);
  left:100%;
  top:0;
  color:#ee0;#eef825;
  
}

.signal td,
.signal td:after {
  font-family:Arial,Helvetica,sans-serif;
  font-size:20px;
  font-weight:bold;
  padding:10px;
}

.signal td {
  position:relative;
  background:#3bc;#29B9C8;
  color:#fff;
}

.signal {
  border-collapse: separate;
  border-spacing:1px;
}
<table class="signal">
  <tr>
    <td data-signal="+">NF-e</td>
    <td data-signal="+">CT-e</td>
    <td data-signal="=">MDF-e</td>
    <td>...</td>
</table>
<table>
  <tr class="signal">
    <td data-signal="+">NF-e</td>
    <td data-signal="+">CT-e</td>
    <td data-signal="=">MDF-e</td>
    <td>...</td>
</table>
td:after {
  content:attr(data-signal); /* para pegar do HTML o sinal           */
  z-index:1;                 /* para que o sinal fique sobre o resto */
  ...                        /* aqui você acerta o posicionamento    */
}
.signal td:after {
  content:attr(data-signal);
  display:block;
  position:absolute;
  z-index:1;
  transform:translate(-50%);
  left:100%;
  top:0;
  color:#ee0;
  
}

.signal td,
.signal td:after {
  font-family:Arial,Helvetica,sans-serif;
  font-size:20px;
  font-weight:bold;
  padding:10px;
}

.signal td {
  position:relative;
  background:#3bc;
  color:#fff;
}

.signal {
  border-collapse: separate;
  border-spacing:1px;
}
<table class="signal">
  <tr>
    <td data-signal="+">NF-e</td>
    <td data-signal="+">CT-e</td>
    <td data-signal="=">MDF-e</td>
    <td>...</td>
</table>
<table>
  <tr>
    <td data-signal="+">NF-e</td>
    <td data-signal="+">CT-e</td>
    <td data-signal="=">MDF-e</td>
    <td>...</td>
</table>
td {
  position: relative;        /* para podermos usar absolute no :after */
}

td:after {
  content:attr(data-signal); /* para pegar o sinal direto do HTML     */
  position: absolute;
  z-index:1;                 /* para que o sinal fique sobre o resto  */
  left:100%;                 /* alinhando com o canto direito         */
  top:0;                     /* e superior da célula atual            */
  transform:translate(-50%); /* arrumando entre uma célula e outra    */
  ...                        /* e detalhe o que mais precisar.        */
}

Se preferir compatibilidade com navegadores mais velhos, pode omitir os data-attributes e simplesmente usar class="mais", class="igual" nos tds e no CSS acrescentar isto:

.mais  {content:"+"}
.igual {content:"="}

só que neste caso, precisa definir uma entrana no CSS para cada símbolo utilizado.

Note que boa parte do CSS aqui exposto é para estilização, as partes essenciais da técnica mencionada já foram descritas acima.

.signal td:after {
  content:attr(data-signal);
  display:block;
  position:absolute;
  z-index:1;
  transform:translate(-50%);
  left:100%;
  top:0;
  color:#eef825;
  
}

.signal td,
.signal td:after {
  font-family:Arial,Helvetica,sans-serif;
  font-size:20px;
  font-weight:bold;
  padding:10px;
}

.signal td {
  position:relative;
  background:#29B9C8;
  color:#fff;
}

.signal {
  border-collapse: separate;
  border-spacing:1px;
}
<table class="signal">
  <tr>
    <td data-signal="+">NF-e</td>
    <td data-signal="+">CT-e</td>
    <td data-signal="=">MDF-e</td>
    <td>...</td>
</table>
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261

Tem muitas maneiras.

Se estiver usando CSS3, segue uma versão bem interessante. Você pode definir os sinais no próprio HTML via data-attributes, e controlar a exibição em CSS.

Seu HTML fica assim:

<table>
  <tr class="signal">
    <td data-signal="+">NF-e</td>
    <td data-signal="+">CT-e</td>
    <td data-signal="=">MDF-e</td>
    <td>...</td>
</table>

E seu CSS, assim:

td:after {
  content:attr(data-signal); /* para pegar do HTML o sinal           */
  z-index:1;                 /* para que o sinal fique sobre o resto */
  ...                        /* aqui você acerta o posicionamento    */
}


Aplicando na prática

.signal td:after {
  content:attr(data-signal);
  display:block;
  position:absolute;
  z-index:1;
  transform:translate(-50%);
  left:100%;
  top:0;
  color:#ee0;
  
}

.signal td,
.signal td:after {
  font-family:Arial,Helvetica,sans-serif;
  font-size:20px;
  font-weight:bold;
  padding:10px;
}

.signal td {
  position:relative;
  background:#3bc;
  color:#fff;
}

.signal {
  border-collapse: separate;
  border-spacing:1px;
}
<table class="signal">
  <tr>
    <td data-signal="+">NF-e</td>
    <td data-signal="+">CT-e</td>
    <td data-signal="=">MDF-e</td>
    <td>...</td>
</table>