TransWikia.com

acceder por css solo al texto y no al anchor dentro de un párrafo ()

Stack Overflow en español Asked by Álvaro García on December 5, 2021

Muy buenas,
Pues lo dicho, ¿alguien sabe cómo tocar los estilos del texto sin afectar al anchor?

Básicamente, lo que me gustaría sería poner un min-height al texto para que el "read more" no se descuadre.

He buscado pseudo selectores, lo he intentado con el not:, he probado a cambiar el excerpt the wordpress pero no encuentro la forma. Y la verdad me extraña que no haya algún selector css para estos caso.

Aquí tenéis el código:

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
labore et do[…]

<a class="read-more" href="http://testing.wholesalenosestuds.com/testin-3/">
Read more
</a>
</p>

Y una imagen también por aquí:
introducir la descripción de la imagen aquí

4 Answers

si estas limitado a esa estructura probaste crear los "read me" con ::before? te dejo un ejemplo para tu caso , espero que te sirva y sino exitos!

 .parrafo{
   width: 300px;
    
   min-height: 100px;
   margin: 2rem;
   border: 1px solid black;
 }
.ancla{
  text-decoration: none;
}
 .ancla::before
 {
   display: block;
   content: 'read me';
   margin: 2rem auto;
   text-align: center;
   color: yellow;
    width: 40%;
    background-color: teal;
    border-radius: 1rem;
 }
  <p class="parrafo">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi, quisquam! Vel similique sit tempora nobis beatae veritatis quo! Amet porro, eius fuga fugit unde officia quae provident atque nam distinctio?
        <a href="#" class="ancla"></a>
      </p>

Answered by facu aquino on December 5, 2021

No me manejo con WordPress, pero a nivel de la maquetación considero que es donde debería existir una modificación en cuanto a las etiquetas HTML que estás usando.

Por otro lado de la manera en que buscas el resultado y basándonos en lo que nos indicas has investigado o tratado pienso que:

  • Al contenedor de tus cards le damos un display grid
  • Le indicamos que genere 3 columnas
  • A los elementos podemos distribuirlos así:
    • Una etiqueta article por cada párrafo (es decir en total 3)
      • A estos 3 elementos le damos un ancho definido
    • A la etiqueta a la colocamos como hermana de la etiqueta article
      • A estos 3 elementos (los enlaces) le indicamos su posición por medio de grid-row

Código:

    <style>
      .galeria {
        border: 1px solid;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        margin: 0 auto;
        padding: 20px;
        width: 800px;
      }
      .galeria-imagen {
        border: 1px solid;
        width: 250px;
      }
      .enlaceN {
         color: red;
         grid-row: 2;
        text-align: center;
      }
    </style>
    
    <section class="galeria">
      <article class="galeria-imagen">
        <p class="galeria-imagen__parrafo">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione ea nulla vero ad iure hic inventore quasi error voluptatem. Sunt at ea, voluptatem nam culpa delectus, eligendi similique? Quae, unde.
          kjhdfkjshfksdhjfksjhkshjfksjhflorem
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium rem nulla libero commodi, tempora, officiis, necessitatibus, reprehenderit quis deleniti temporibus harum! Qui aperiam officia, laudantium iusto dolorum sequi adipisci ipsum!
        </p>
      </article>
    
          <a href="" class="enlaceN">Leer Mas</a>    </div>
      <article class="galeria-imagen">
        <p class="galeria-imagen__parrafo">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur odit facere, laboriosam doloribus similique earum id. Fuga accusantium dolor quia ex in illum voluptatem! Similique fugit saepe nihil dolorum nostrum.
        </p>
      </article>
     <a href="" class="enlaceN">Leer Mas</a>
      <article class="galeria-imagen">
        <p class="galeria-imagen__parrafo">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem dignissimos alias minus id veritatis pariatur magni, accusantium iusto excepturi odit voluptatem, ipsum ducimus ullam, esse repellat dolor, repellendus et inventore.
        </p>
      </article>
      <a href="" class="enlaceN">Leer Mas</a>
    </section>

Con un resultado así:

introducir la descripción de la imagen aquí

Enlaces de interés

Answered by BetaM on December 5, 2021

haz intentado con una clase para los 3 botones y colocar a todos en la misma posicion con un absolute?

nota: si mi respuesta no es lo ms profesional es que tambien estoy empezando, solo intento darle alguna solucion

Answered by Diego Goncalves on December 5, 2021

Te recomiendo usar Grid para dividir el elemento en 3 partes, siendo la tercera el boton de View more, asi la altura de este seria totalmente independiente del tamaño del parrafo, tambien puedes meter esos elementos dentro de un container y hacer que este controle el alto, asi la altura de las columnas siempre seria igual independientemente de cuando texto haya dentro, espero que te sea de ayuda. :)

Answered by vo1d dev on December 5, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP