<!DOCTYPE html>
<html>
<style >
.element{
font-size: 100px
}
.typed-cursor{
font-size: 100px
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
@keyframes blink{
10% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink{
10% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink{
10% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
</style>
<head>
<script src="jquery-2.1.4.js"></script>
<script type="text/javascript" src="typed.js"></script>
</head>
<body>
<span class = "element">
<script>
$(function(){
$(".element").typed({
strings: ["agdsgdggd","okay"],
typeSpeed: 100,
loop: true,
cursorChar: "|",
});
});
</script>
</span>
</body>
</html>
So I made my element span have a default text size, which modifies the text, but the curser is unchanged. I tried to set the cursor size in the css, but it seems not to have worked. Maybe someone knows the trick that I am missing. Thank you.
I'm answering my own question. This is the solution to make the text the and the cursor the same size for typed javascript library,
before
forgot semi colon on font size
Works now.