css - por - reemplazar texto en html
¿Cómo puedo reemplazar el texto con CSS? (17)
¿Cómo puedo reemplazar el texto con css usando un método como este:
.pvw-title img[src*="IKON.img"] { visibility:hidden; }
En lugar de ( img[src*="IKON.img"] ), necesito usar algo que pueda reemplazar el texto.
Tengo que usar [ ] para que funcione.
<div class="pvw-title">Facts</div>
Necesito reemplazar "Hechos".
A diferencia de lo que veo en cada una de las otras respuestas, no es necesario usar pseudo elementos para reemplazar el contenido de una imagen con una imagen.
Hechosdiv.pvw-title { /* no :after or :before required*/
content: url("your url here");
}
Basado en share , esto funcionó para mí.
button {
position: absolute;
visibility: hidden;
}
button:before {
content: "goodbye";
visibility: visible;
}
un elemento que está posicionado absolutamente se retira del flujo y, por lo tanto, no ocupa espacio cuando se colocan otros elementos.
Esto implementa una casilla de verificación como botón que muestra Sí o No según su estado "marcado". Así que demuestra una forma de reemplazar texto usando CSS sin tener que escribir ningún código.
Aún se comportará como una casilla de verificación en cuanto a devolver (o no devolver) un valor POST, pero desde el punto de vista de la pantalla parece un botón de alternar.
Los colores pueden no ser de su agrado, solo están ahí para ilustrar un punto.
El HTML es:
<input type="checkbox" class="yesno" id="testcb" /><label for="testcb"><span></span></label>
... y el CSS es:
/* --------------------------------- */
/* Make the checkbox non-displayable */
/* --------------------------------- */
input[type="checkbox"].yesno {
display:none;
}
/* --------------------------------- */
/* Set the associated label <span> */
/* the way you want it to look. */
/* --------------------------------- */
input[type="checkbox"].yesno+label span {
display:inline-block;
width:80px;
height:30px;
text-align:center;
vertical-align:middle;
color:#800000;
background-color:white;
border-style:solid;
border-width:1px;
border-color:black;
cursor:pointer;
}
/* --------------------------------- */
/* By default the content after the */
/* the label <span> is "No" */
/* --------------------------------- */
input[type="checkbox"].yesno+label span:after {
content:"No";
}
/* --------------------------------- */
/* When the box is checked the */
/* content after the label <span> */
/* is "Yes" (which replaces any */
/* existing content). */
/* When the box becomes unchecked the*/
/* content reverts to the way it was.*/
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span:after {
content:"Yes";
}
/* --------------------------------- */
/* When the box is checked the */
/* label <span> looks like this */
/* (which replaces any existing) */
/* When the box becomes unchecked the*/
/* layout reverts to the way it was. */
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span {
color:green;
background-color:#C8C8C8;
}
Solo lo he probado en Firefox, pero es CSS estándar, por lo que debería funcionar en otros lugares.
Esto me funcionó con texto en línea. Probado en FF, Safari, Chrome y Opera
<p>Lorem ipsum dolor sit amet, consectetur <span>Some Text</span> adipiscing elit.</p>
span {
visibility: hidden;
word-spacing:-999px;
letter-spacing: -999px;
}
span:after {
content: "goodbye";
visibility: visible;
word-spacing:normal;
letter-spacing:normal;
}
Esto no es realmente posible sin trucos. Esta es una forma que funciona al reemplazar el texto con una imagen de texto.
.pvw-title{
text-indent:-9999px;
background-image:url(text_image.png)
}
Este tipo de cosas se hace típicamente con Javascript. Aquí es cómo se puede hacer con jQuery:
$(''.pvw-title'').text(''new text'');
No puedes, bueno, puedes.
.pvw-title:after {
content: "Test";
}
Esto insertará contenido después del contenido actual del elemento. En realidad, no lo reemplaza, pero puedes elegir un div vacío y usar CSS para agregar todo el contenido.
Pero mientras más o menos puedas, no deberías. El contenido real debe ser puesto en el documento. La propiedad de contenido se destina principalmente a marcas pequeñas, como comillas alrededor del texto que debe aparecer entre comillas.
O tal vez podría ajustar ''Datos'' alrededor de <span> siguiente manera:
<div class="pvw-title"><span>Facts</span></div>
Luego use:
.pvw-title span {
display: none;
}
.pvw-title:after {
content: ''whatever it is you want to add'';
}
Reemplazo de texto con pseudo-elementos y visibilidad de CSS
HTML
<p class="replaced">Original Text</p>
CSS
.replaced {
visibility: hidden;
position: relative;
}
.replaced:after {
visibility: visible;
position: absolute;
top: 0;
left: 0;
content: "This text replaces the original.";
}
Si está dispuesto a usar pseudo elementos y dejar que inserten contenido, puede hacer lo siguiente. No asume el conocimiento del elemento original y no requiere marcado adicional.
.element {
text-indent: -9999px;
line-height: 0; /* Collapse the original line */
}
.element::after {
content: "New text";
text-indent: 0;
display: block;
line-height: initial; /* New content takes up original line height */
}
Simple, corto, eficaz. No html adicional necesario.
.pvw-title { color: transparent; }
.pvw-title:after {
content: "New Text To Replace Old";
color: black; /* set color to original text color */
margin-left: -30px;
/* margin-left equals length of text we''re replacing */
}
Tuve que hacer esto para reemplazar el texto del enlace, que no sea el de casa, por migas de pan de woocommerce
SASS / LESS
body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
color: transparent;
&:after {
content: "Store";
color: grey;
margin-left: -30px;
}
}
CSS
body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
color: transparent;
}
body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"]&:after {
content: "Store";
color: @child-color-grey;
margin-left: -30px;
}
Trate de usar: antes y: después. Uno inserta texto después de que se representa el HTML, el otro inserta antes de que se represente el HTML. Si desea reemplazar texto, deje el contenido del botón vacío.
Este ejemplo establece el texto del botón según el tamaño del ancho de la pantalla.
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
button:before {
content: ''small screen'';
}
@media screen and (min-width: 480px) {
button:before {
content: ''big screen'';
}
}
</style>
<body>
<button type="button">xxx</button>
<button type="button"></button>
</body>
Botón de texto:
1) con: antes
gran pantallaxxx
pantalla grande
2) con: despues
pantalla xxxbig
pantalla grande
Tuve más suerte al establecer el font-size: 0 del elemento externo y el font-size de font-size del :after selector a lo que fuera necesario.
Tuve un problema en el que tuve que reemplazar el texto del enlace pero no pude usar javascript ni tampoco pude cambiar directamente el texto de un hipervínculo, ya que fue compilado desde XML. Además, no podía usar pseudo elementos, o parecían no funcionar cuando los había probado.
Básicamente, puse el texto que quería en un espacio y puse la etiqueta de anclaje debajo de él y lo envolví en un div. Básicamente, moví la etiqueta de anclaje hacia arriba a través de css y luego hice la fuente transparente. Ahora, cuando se desplaza sobre el espacio, "actúa" como un enlace. Una forma realmente intrincada de hacer esto, pero así es como puedes tener un enlace con un texto diferente ...
Este es un problema de cómo resolví este problema.
Mi HTML
<div class="field">
<span>This is your link text</span><br/>
<a href="//www.google.com" target="_blank">This is your actual link</a>
</div>
Mi CSS
div.field a {
color:transparent;
position:absolute;
top:1%;
}
div.field span {
display:inline-block;
}
El CSS deberá cambiar según sus requisitos, pero esta es una forma general de hacer lo que está pidiendo.
Edit: ¿Puede alguien decirme por qué esto fue votado abajo? Mi solución funciona ...
Usando un pseudo elemento, este método no requiere conocimiento del elemento original y no requiere ningún marcado adicional.
#someElement{
color: transparent; /*you may need to change this color*/
position: relative;
}
#someElement:after { /*or use :before if that tickles your fancy*/
content:"New text";
color:initial;
position:absolute;
top:0;
left:0;
}
Yo uso este truco:
.pvw-title {
text-indent: -999px;
}
.pvw-title:after {
text-indent: 0px;
float: left;
content: ''My New Content'';
}
Incluso he usado esto para manejar la internacionalización de páginas simplemente cambiando una clase base ...
.translate-es .welcome {
text-indent: -999px;
}
.translate-es .welcome:after {
text-indent: 0px;
float: left;
content: ''¡Bienvenidos!'';
}
Puede que no responda perfectamente a la pregunta, pero satisface mis necesidades y quizás otras también.
Entonces, si solo desea mostrar diferentes textos o imágenes, mantenga la etiqueta vacía y escriba su contenido en múltiples atributos de datos como ese <span data-text1="Hello" data-text2="Bye"></span> . Muéstralos con una de las pseudo clases :before {content: attr(data-text1)}
Ahora tienes un montón de maneras diferentes para cambiar entre ellos. Los usé en combinación con consultas de medios para un enfoque de diseño receptivo para cambiar los nombres de mi navegación a iconos.
Obligatorio : este es un hack: CSS no es el lugar correcto para hacer esto, pero en algunas situaciones, por ejemplo, tiene una biblioteca de terceros en un iframe que solo puede ser personalizado por CSS, este tipo de hack es la única opción .
Puede reemplazar texto a través de CSS. Vamos a reemplazar un botón verde con ''hola'' con un botón rojo que dice ''adiós'' , usando CSS. Vea http://jsfiddle.net/ZBj2m/274/ para una demostración en vivo:
Aquí está nuestro botón verde:
<button>Hello</button>
button {
background-color: green;
color: black;
padding: 5px;
}
Ahora ocultemos el elemento original, pero luego agregamos otro elemento de bloque:
button {
visibility: hidden;
}
button:after {
content:''goodbye'';
visibility: visible;
display: block;
position: absolute;
background-color: red;
padding: 5px;
top: 2px;
}
Nota:
- Necesitamos explícitamente marcar esto como un elemento de bloque, los elementos ''después'' están extendidos por defecto
- Necesitamos compensar el elemento original ajustando la posición del pseudo-elemento.
- Debemos ocultar el elemento original y mostrar el pseudo elemento utilizando
visibility. Nota dedisplay: noneen el elemento original no funciona.